how to extract img src from an external list

[sallam]

Greetings

I need your help please..
I have a website of 20 pages. Each page displays an image from a catalog located in another domain, and the catalog changes each week, so I have to change the img src attribute each week too (the jpg images are named differently each week, though in the same directory). So instead of editing 20 html pages each time, I'm trying to find a way to control the img src from a text file, so that I edit only that text file once a week.

Is there a way to extract img src attributes from a text file or js file please?
For example I need page 1 to extract the first img src listed in the text file, and page 2 to extract the second src listed, etc.
I'm new to js so please give an example of the code that I should use.

Many thanks.

[ZABI]

Hm, you can do that by creating a list of variables or an array and save in external js file. then you can use that variable in respective page.


but why dont you use PHP ? you will not have to update any file even in a week or month,

[sallam]

Thanks fo replying.
I'm afraid I don't know how to write code in php either.
It would be great if you give an example script, either in js or php like you suggested.

[007Julien]

An example (to test) without PHP

// A Javascript file name myImg-38.js (38 is the ISOWeekNumber)
// An array of image src
var arrImg="img0.jpg,img1.jpg,...,img19.jpg".split(',');

Your pages

<script type="text/javascript">
Date.prototype.getISOWeek = function() {var i,d,firstWeekMonday;
    var i=1;while (new Date(this.getFullYear(),0,i).getDay()!=4) ++i;// i the first Thursday;
    var firstWeekMonday = new Date(this.getFullYear(),0,i-3,0,0,0,-1);// one millisecond before 
    d=Math.ceil(((this-firstWeekMonday)/60000-this.getTimezoneOffset()+firstWeekMonday.getTimezoneOffset())/(1440*7));
		if (d==53 && new Date(this.getFullYear(),0,1).getDay()!=4 && new Date(this.getFullYear()+1,0,0).getDay()!=4) d=1;	
    return d?d:new Date(this.getFullYear(),0,0).getISOWeek();// the week of the 31 December before if d is null !
}
var tdy=new Date(),isoNumber=tdy.getISOWeek(),jsFileName='myImg-'+isoNumber+'.js';
// A simple method to load the scipt with the opening of the page 
document.write('<script type="text/javascript" src="+jsFileName+"></script>');
// then the array arrImg is available 

</script>

An other method could consists to load dynamically the script like on this page

[ZABI]

simply create a new text file in notepad (or whatever your text editor)
var images=new Array();
images[1]='path/to/image1.jpg';
images[2]='path/to/image2.jpg';
images[3]='path/to/image3.jpg';
.
.
.
.
.
.
images[20]='path/to/image20.jpg';


then you can set the image src for page 1 like this and so on
<img id="img" src="loading.gif" />
<script>
document.getElementById('img').src=images[1];
</script>

[sallam]

@007Julien
Thanks very much for the script. What does it do? I find it hard to understand..

@ZABI
Many thanks for the simple script, it worked like a charm.
You mentioned earlier that if I used php I will not have to update any files? that would be very much interesting. You mean a script that extracts the image links from the source directly?
Can you please write me an example of such fascinating script?
(btw: the number of images vary each week, sometimes 16, 20, 24..)
the img src links look like this:

http://www.example.com/sites/ContentPhotos/Photos/Store%20cat0-1_012829.jpg
http://www.example.com/sites/ContentPhotos/Photos/Store%20cat0-2_012848.jpg
http://www.example.com/sites/ContentPhotos/Photos/Store%20cat0-3_012900.jpg

but the name of the jpg files change each week..

[007Julien]

The proposed script create a new method to the object Date to get the ISO week Number. Then you have only to define many javascript files (one a week : myImg-0.js, myImg-1.js, myImg-2.js ...) to describe the images...

NB : It 's not necessary to repeat the full path in the array of images !

[ZABI]

its good to know that it worked for you simpler is a better solution


well the PHP method will require PHP installed on your server (mostly shared hosting servers have already). Plz also send me the link from where you want images to get, actually the idea is to parse the page and extract images' src from it, then you can show those images where you want.




did you check my Private Message ?

[sallam]

I just read your PM. Thanks so much. I've sent you the link.
(And yes, I have php installed in my server.)

[ZABI]

save the following in a text file with .php extention, it will give the list of those photos

<?php
$source='http://www.spinneys.com/sites/Egypt/News.aspx?pageid=54';
@fopen($source, 'r') or die('Error accessing URL');
   
$ddoc = new DOMDocument();
@$ddoc->loadHTMLFile($source);
$tags = $ddoc->getElementsByTagName('img');

foreach ($tags as $tag) {
    $src = $tag->getAttribute('src');
    if (@strpos($src,'ContentPhotos')!==false){
        echo str_replace('Thumb','Photo',$src)."\r\n";
    }
}

?>

[sallam]

Many Thanks ZABI. I've tested the script and when loaded in the browser it outputs all 20 links. But there is a part that shouldn't be in the URLs, which is: "Photo_"

../ContentPhotos/Photos/Photo_Spinneys flyer0-1_012829.jpg

And since those are relative links, can you change the first script to use relative links instead of absolute links?
I'm supposed to use the php file instead of the js file, right?
But then, if I used a cron tab to execute the php file each week, can you make the php file write the output into a text file (or a js file like the first one?), so that the pages use img src links from there? or do you mean that the html pages will execute the php file and get the im src from there directly?

Please re-write the script that I should insert in the html pages to use your new php script, so that I understand better what to do.

[ZABI]

now you just have to use this php file in place of your external js file
no need for updating or writing to files or any thing else, it will automatically generate array when accessed

<?php
$source='http://www.spinneys.com/sites/Egypt/News.aspx?pageid=54';
@fopen($source, 'r') or die('Error accessing URL');

$find=array('Thumb','Photo_','../');
$replace=array('Photo','','http://www.spinneys.com/sites/');

$ddoc = new DOMDocument();
@$ddoc->loadHTMLFile($source);
$tags = $ddoc->getElementsByTagName('img');

echo "var images=new Array();\r\n";
$i=1;

foreach ($tags as $tag) {
    $src = $tag->getAttribute('src');        
    if (@strpos($src,'ContentPhotos')!==false){
        echo "images[$i]='".str_replace($find,$replace,$src)."';\r\n";
        $i++;
    }
}
?>

[sallam]

That's great. Execuse my ignorace, but how do I make the html pages use the php file?
When I used js there was this line in the header:

<script type="text/javascript" src="images.js"></script>

What do I replace it with now?
and should I use php pages instead of html pages?

[ZABI]

<script type="text/javascript" src="images.php"></script>

where images.php is name of the file you created to extract the src from the page.

[sallam]

Perfect! worked flawlessly! you'r amazing ZABI.
Thank you bro sooo much indeed.