www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 28

Thread: how to extract img src from an external list

Hybrid View

  1. #1
    Join Date
    Apr 2005
    Posts
    46

    how to extract img src from an external list

    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.

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    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,

  3. #3
    Join Date
    Apr 2005
    Posts
    46
    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.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    An example (to test) without PHP

    Code:
    // 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

    Code:
    <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

  5. #5
    Join Date
    Mar 2009
    Posts
    452
    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>

  6. #6
    Join Date
    Apr 2005
    Posts
    46
    @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:
    HTML Code:
    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..
    Last edited by sallam; 09-23-2012 at 01:41 AM.

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    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 !

  8. #8
    Join Date
    Mar 2009
    Posts
    452
    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 ?

  9. #9
    Join Date
    Apr 2005
    Posts
    46
    I just read your PM. Thanks so much. I've sent you the link.
    (And yes, I have php installed in my server.)

  10. #10
    Join Date
    Mar 2009
    Posts
    452
    save the following in a text file with .php extention, it will give the list of those photos

    PHP Code:
    <?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";
        }
    }

    ?>

  11. #11
    Join Date
    Apr 2005
    Posts
    46
    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.
    Last edited by sallam; 09-24-2012 at 06:20 AM.

  12. #12
    Join Date
    Mar 2009
    Posts
    452
    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 Code:
    <?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++;
        }
    }
    ?>

  13. #13
    Join Date
    Apr 2005
    Posts
    46
    Quote Originally Posted by ZABI View Post
    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 Code:
    <?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++;
        }
    }
    ?>
    ZABI, please help me. The site has changed the location of the images. Now the images' URLs are like this:
    Code:
    spinneys.com/Library/Images/Spinneys%20flyer0-01.jpg
    and sometimes like this..
    Code:
    spinneys.com/Library/Images/Spinneys%20flyer01.jpg
    What changes should I make to your script above please?
    Last edited by sallam; 12-20-2012 at 05:21 PM.

  14. #14
    Join Date
    Apr 2005
    Posts
    46
    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:
    HTML Code:
    <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?
    Last edited by sallam; 09-24-2012 at 07:31 AM.

  15. #15
    Join Date
    Mar 2009
    Posts
    452
    <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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles