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

Thread: Automatic random slideshow from folder of images

  1. #1
    Join Date
    Jan 2009
    Posts
    9

    Automatic random slideshow from folder of images

    Hello there,

    I am trying to make a slideshow that cycles through images in a specific folder randomly every 2 seconds. The reason I'm trying to do this is to allow for easier updates in the future and all I have to change is the images in the folder and not have to mess with the webpage itself.

    Does that make sense?

    Any help would be greatly appreciate it.

    Thanks,
    Lorne

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    Using only standard JavaScript, in an Internet-based web page, will not allow you to retrieve the names of the files in a server folder. The only work-around for this is if all of the files have the same text prefix and are suffixed by a number. Such as:

    image1.jpg
    image2.jpg
    image3.jpg
    ...etc...

    Using this scheme, JavaScript can guess at the file names and, using error trapping, even be able to handle missing files in the sequence. Of course, this is not the best method. The best method is to use server-side code to either generated to page content directly, or to pass the file names to JavaScript, as a JavaScript data array, so that JavaScript can generate the page content based on the array values. Of course, you could also maintain a .js file which contains the JavaScript data array -- no server-side code needed.
    Last edited by MrNobody; 01-11-2009 at 10:34 PM.

  3. #3
    Join Date
    Jan 2009
    Posts
    9
    I'd like to use the workaround. Seems to be my best option. But I'm fairly new with javascript. Do you have or know of any tutorials that I could refer to? It'd help a lot. Thanks,

    Lorne

  4. #4
    Join Date
    Feb 2008
    Posts
    1,666
    Don't know of any specific tutorials, but for JavaScript to handle images in the manner you've described will require the use of the JavaScript Array() object, the Image() object, its onerror and onload events, and the window.setTimeout() method.

    http://www.w3schools.com/jsref/default.asp

  5. #5
    Join Date
    Jan 2009
    Posts
    9
    Hello again,

    I got this working correctly:
    PHP Code:
    <script type="text/javascript">
    theimage = new Array();


    // The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
    // Format: theimage[...]=[image URL, link URL, name/description]
    theimage[0]=["bpa-images/Home Slideshow/image01.jpg"""""];
    theimage[1]=["bpa-images/Home Slideshow/image02.jpg"""""];
    theimage[2]=["bpa-images/Home Slideshow/image03.jpg"""""];
    theimage[3]=["bpa-images/Home Slideshow/image04.jpg"""""];
    theimage[4]=["bpa-images/Home Slideshow/image05.jpg"""""];
    theimage[5]=["bpa-images/Home Slideshow/image06.jpg"""""];
    theimage[6]=["bpa-images/Home Slideshow/image07.jpg"""""];
    theimage[7]=["bpa-images/Home Slideshow/image08.jpg"""""];
    theimage[8]=["bpa-images/Home Slideshow/image09.jpg"""""];
    theimage[9]=["bpa-images/Home Slideshow/image10.jpg"""""];
    theimage[10]=["bpa-images/Home Slideshow/image11.jpg"""""];
    theimage[11]=["bpa-images/Home Slideshow/image12.jpg"""""];
    theimage[12]=["bpa-images/Home Slideshow/image13.jpg"""""];
    theimage[13]=["bpa-images/Home Slideshow/image14.jpg"""""];
    theimage[14]=["bpa-images/Home Slideshow/image15.jpg"""""];
    theimage[15]=["bpa-images/Home Slideshow/image16.jpg"""""];
    theimage[16]=["bpa-images/Home Slideshow/image17.jpg"""""];
    theimage[17]=["bpa-images/Home Slideshow/image18.jpg"""""];
    theimage[18]=["bpa-images/Home Slideshow/image19.jpg"""""];
    theimage[19]=["bpa-images/Home Slideshow/image20.jpg"""""];
    theimage[20]=["bpa-images/Home Slideshow/image21.jpg"""""];
    theimage[21]=["bpa-images/Home Slideshow/image22.jpg"""""];
    theimage[22]=["bpa-images/Home Slideshow/image23.jpg"""""];
    theimage[23]=["bpa-images/Home Slideshow/image24.jpg"""""];
    theimage[24]=["bpa-images/Home Slideshow/image25.jpg"""""];
    theimage[25]=["bpa-images/Home Slideshow/image26.jpg"""""];
    theimage[26]=["bpa-images/Home Slideshow/image27.jpg"""""];
    theimage[27]=["bpa-images/Home Slideshow/image28.jpg"""""];
    theimage[28]=["bpa-images/Home Slideshow/image29.jpg"""""];
    theimage[29]=["bpa-images/Home Slideshow/image30.jpg"""""];
    theimage[30]=["bpa-images/Home Slideshow/image31.jpg"""""];

    ///// Plugin variables

    playspeed=2000;// The playspeed determines the delay for the "Play" button in ms
    dotrans=1// if value = 1 then there are transitions played in IE
    transtype='blendTrans';// 'blendTrans' or 'revealtrans'
    transattributes='23';// duration=seconds,transition=#<24
    //#####
    //key that holds where in the array currently are
    i=0;


    //###########################################
    //if random
    function SetRandom() {
        
    tempimage = new Array();
        for(
    p=0p<theimage.lengthp++){
            for(
    p1=0p1>-1p1) {
                
    tempNum Math.floor(Math.random()*theimage.length)
                if(!
    tempimage[tempNum]){
                    
    tempimage[tempNum]=theimage[p];
                    break;
                }
            }
        }
        for(
    p=0;p<theimage.length;p++)theimage[p]=tempimage[p];
    }

    //if random order
    SetRandom()


    //###########################################
    window.onload=function(){

        
    //preload images into browser
        
    preloadSlide();

        
    //set transitions
        
    GetTrans();

        
    //set the first slide
        
    SetSlide(0);

        
    //autoplay
        
    PlaySlide();
    }

    //###########################################
    function SetSlide(num) {
        
    //too big
        
    i=num&#37;theimage.length;
        //too small
        
    if(i<0)i=theimage.length-1;

        
    //switch the image
        
    if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
        
    document.images.imgslide.src=theimage[i][0];
        if(
    document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')

    }


    //###########################################
    function PlaySlide() {
        if (!
    window.playing) {
            
    PlayingSlide(i+1);
            if(
    document.slideshow.play){
                
    document.slideshow.play.value="   Stop   ";
            }
        }
        else {
            
    playing=clearTimeout(playing);
            if(
    document.slideshow.play){
                
    document.slideshow.play.value="   Play   ";
            }
        }
        
    // if you have to change the image for the "playing" slide
        
    if(document.images.imgPlay){
            
    setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
            
    imgStop=document.images.imgPlay.src
        
    }
    }


    //###########################################
    function PlayingSlide(num) {
        
    playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);'playspeed);
    }


    //###########################################
    //desc: picks the transition to apply to the images
    function GetTrans() {
        
    //si=document.slideshow.trans.selectedIndex;

            
    if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
            
    dotrans=0;
        }
        else if ((
    document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
            
    dotrans=1;
            
    transtype='blendTrans';
            
    document.imgslide.style.filter "blendTrans(duration=1,transition=1)";
        }else{
            
    dotrans=1;
            
    transtype='revealtrans';
            if(
    document.slideshow.transtransattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
            
    document.imgslide.style.filter "revealTrans(duration=1,transition=" +transattributes")";
        }

    }
    //###########################################
    function preloadSlide() {
        for(
    k=0;k<theimage.length;k++) {
            
    theimage[k][0]=new Image().src=theimage[k][0];
        }
    }


    </script>


    <!-- slide show HTML -->
    <form name="slideshow">

    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
        <a href="#" onmouseover="this.href=theimage[i][1];return false">
        <script type="text/javascript">
            document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
        </script>
        </a>
        </td>
    </tr>
    </table>

    </form> 
    But what I would like to do is get this code to not depend on how many files are in the folder. This way we can just add/remove images and keep them to the naming scheme: image01.jpg, image02.jpg, etc. Is there a way to have the script add one to each? image i+1. I have done something similar in Actionscript before, but I cannot figure it out with Java script. Any help would be great.

    Thanks,
    Lorne

  6. #6
    Join Date
    Feb 2008
    Posts
    1,666
    The following is written for no leading zeroes: meaning, use image1.jpg and not image01.jpg:
    Code:
    var maxImages = 99;
    var myImages = new Array();
    //
    var imgPath = "bpa-images/Home Slideshow/";
    var imgPrefix = "image";
    var imgSuffix = ".jpg";
    //
    function preloadComplete()
    {
        this.complete = true;
    }
    function preloadError()
    {
        this.complete = false;
    }
    function preloadImages()
    {
        for (var x=1; i<=maxImages; ++x)
        {
            myImages[x] = new Image();
            myImages[x].onerror = preloadError;
            myImages[x].onload = preloadComplete;
            myImages[x].src = imgPath + imgPrefix + x + imgSuffix;
        }
        return true;
    }
    window.onload = preloadImages;
    Last edited by MrNobody; 01-13-2009 at 06:59 PM.

  7. #7
    Join Date
    Jan 2009
    Posts
    9
    Ok so I copied your code and replaced this:
    PHP Code:
    theimage = new Array();


    // The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
    // Format: theimage[...]=[image URL, link URL, name/description]
    theimage[0]=["bpa-images/Home Slideshow/image01.jpg"""""];
    theimage[1]=["bpa-images/Home Slideshow/image02.jpg"""""];
    theimage[2]=["bpa-images/Home Slideshow/image03.jpg"""""];
    theimage[3]=["bpa-images/Home Slideshow/image04.jpg"""""];
    theimage[4]=["bpa-images/Home Slideshow/image05.jpg"""""];
    theimage[5]=["bpa-images/Home Slideshow/image06.jpg"""""];
    theimage[6]=["bpa-images/Home Slideshow/image07.jpg"""""];
    theimage[7]=["bpa-images/Home Slideshow/image08.jpg"""""];
    theimage[8]=["bpa-images/Home Slideshow/image09.jpg"""""];
    theimage[9]=["bpa-images/Home Slideshow/image10.jpg"""""];
    theimage[10]=["bpa-images/Home Slideshow/image11.jpg"""""];
    theimage[11]=["bpa-images/Home Slideshow/image12.jpg"""""];
    theimage[12]=["bpa-images/Home Slideshow/image13.jpg"""""];
    theimage[13]=["bpa-images/Home Slideshow/image14.jpg"""""];
    theimage[14]=["bpa-images/Home Slideshow/image15.jpg"""""];
    theimage[15]=["bpa-images/Home Slideshow/image16.jpg"""""];
    theimage[16]=["bpa-images/Home Slideshow/image17.jpg"""""];
    theimage[17]=["bpa-images/Home Slideshow/image18.jpg"""""];
    theimage[18]=["bpa-images/Home Slideshow/image19.jpg"""""];
    theimage[19]=["bpa-images/Home Slideshow/image20.jpg"""""];
    theimage[20]=["bpa-images/Home Slideshow/image21.jpg"""""];
    theimage[21]=["bpa-images/Home Slideshow/image22.jpg"""""];
    theimage[22]=["bpa-images/Home Slideshow/image23.jpg"""""];
    theimage[23]=["bpa-images/Home Slideshow/image24.jpg"""""];
    theimage[24]=["bpa-images/Home Slideshow/image25.jpg"""""];
    theimage[25]=["bpa-images/Home Slideshow/image26.jpg"""""];
    theimage[26]=["bpa-images/Home Slideshow/image27.jpg"""""];
    theimage[27]=["bpa-images/Home Slideshow/image28.jpg"""""];
    theimage[28]=["bpa-images/Home Slideshow/image29.jpg"""""];
    theimage[29]=["bpa-images/Home Slideshow/image30.jpg"""""];
    theimage[30]=["bpa-images/Home Slideshow/image31.jpg"""""]; 

    So my new code looks like this:
    PHP Code:
    <script type="text/javascript">

    var 
    maxImages 99;
    var 
    myImages = new Array();
    //
    var imgPath "bpa-images/Home Slideshow/";
    var 
    imgPrefix "image";
    var 
    imgSuffix ".jpg";
    //
    function preloadComplete()
    {
        
    this.complete true;
    }
    function 
    preloadError()
    {
        
    this.complete false;
    }
    function 
    preloadImages()
    {
        for (var 
    x=1i<=maxImages; ++x)
        {
            
    myImages[x] = new Image();
            
    myImages[x].onerror preloadError;
            
    myImages[x].onload preloadComplete;
            
    myImages[x].src imgPath imgPrefix imgSuffix;
        }
        return 
    true;
    }
    window.onload preloadImages;

    ///// Plugin variables

    playspeed=2000;// The playspeed determines the delay for the "Play" button in ms
    dotrans=1// if value = 1 then there are transitions played in IE
    transtype='blendTrans';// 'blendTrans' or 'revealtrans'
    transattributes='23';// duration=seconds,transition=#<24
    //#####
    //key that holds where in the array currently are
    i=0;


    //###########################################
    //if random
    function SetRandom() {
        
    tempimage = new Array();
        for(
    p=0p<theimage.lengthp++){
            for(
    p1=0p1>-1p1) {
                
    tempNum Math.floor(Math.random()*theimage.length)
                if(!
    tempimage[tempNum]){
                    
    tempimage[tempNum]=theimage[p];
                    break;
                }
            }
        }
        for(
    p=0;p<theimage.length;p++)theimage[p]=tempimage[p];
    }

    //if random order
    SetRandom()


    //###########################################
    window.onload=function(){

        
    //preload images into browser
        
    preloadSlide();

        
    //set transitions
        
    GetTrans();

        
    //set the first slide
        
    SetSlide(0);

        
    //autoplay
        
    PlaySlide();
    }

    //###########################################
    function SetSlide(num) {
        
    //too big
        
    i=num%theimage.length;
        
    //too small
        
    if(i<0)i=theimage.length-1;

        
    //switch the image
        
    if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
        
    document.images.imgslide.src=theimage[i][0];
        if(
    document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')

    }


    //###########################################
    function PlaySlide() {
        if (!
    window.playing) {
            
    PlayingSlide(i+1);
            if(
    document.slideshow.play){
                
    document.slideshow.play.value="   Stop   ";
            }
        }
        else {
            
    playing=clearTimeout(playing);
            if(
    document.slideshow.play){
                
    document.slideshow.play.value="   Play   ";
            }
        }
        
    // if you have to change the image for the "playing" slide
        
    if(document.images.imgPlay){
            
    setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
            
    imgStop=document.images.imgPlay.src
        
    }
    }


    //###########################################
    function PlayingSlide(num) {
        
    playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);'playspeed);
    }


    //###########################################
    //desc: picks the transition to apply to the images
    function GetTrans() {
        
    //si=document.slideshow.trans.selectedIndex;

            
    if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
            
    dotrans=0;
        }
        else if ((
    document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
            
    dotrans=1;
            
    transtype='blendTrans';
            
    document.imgslide.style.filter "blendTrans(duration=1,transition=1)";
        }else{
            
    dotrans=1;
            
    transtype='revealtrans';
            if(
    document.slideshow.transtransattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
            
    document.imgslide.style.filter "revealTrans(duration=1,transition=" +transattributes")";
        }

    }
    //###########################################
    function preloadSlide() {
        for(
    k=0;k<theimage.length;k++) {
            
    theimage[k][0]=new Image().src=theimage[k][0];
        }
    }


    </script>


    <!-- slide show HTML -->
    <form name="slideshow">

    <table width="288" height="432" border="1" cellpadding="1" cellspacing="0" bordercolor="#560D1C">
    <tr>
        <td align="center">
        <a href="#" onmouseover="this.href=theimage[i][1];return false">
        <script type="text/javascript">
            document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
        </script>
        </a>
        </td>
    </tr>
    </table>

    </form> 
    But when I go to preview it, it bugs down Safari and it gives me an error saying that the script is slow and making Safari unresponsive.

    Did I do something wrong? Can someone help me clean up this script?

    Thanks,

    Lorne

  8. #8
    Join Date
    Feb 2008
    Posts
    1,666
    Well, one problem I see is that you're already using the window onload event for your other scripts. So, change this:
    Code:
    window.onload = preloadImages;
    to this:
    Code:
    preloadImages();
    Because the script I gave you does not have to wait until the page completes loading. Otherwise, I don't know if your browser is complaining about your other scripts or about the one I gave you. The one I gave you isn't that burdensome on the browser -- though it does take memory to create Image objects. There is no other way (without server-side code) for JavaScript to dynamically build a list of file names from the server. In conclusion, the only thing you can do to make my script do less, is to change the maxImages variable to a smaller number.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    Do you have a URL to the images or a link to test the code with using Safari?
    Are you getting the same problems with FF and/or MSIE?

    Found one error:
    PHP Code:
        for (var x=1i<=maxImages; ++x) { 
    Should change the 'i' to 'x'.
    Last edited by JMRKER; 01-15-2009 at 02:56 PM. Reason: Found error after query.

  10. #10
    Join Date
    Feb 2008
    Posts
    1,666
    Oops, that would definitely cause the browser to complain. Sorry.

  11. #11
    Join Date
    Jan 2009
    Posts
    9
    Hey there,

    Sorry I have been MIA, work got busy and I have been pushing this off until now.

    I made the changes as you asked, it fixed my safari from bogging down. So that's good. But it doesn't show any images?? Do you know why this is?

    Here's my script:
    PHP Code:
    <script type="text/javascript"

    var 
    maxImages 99
    var 
    myImages = new Array(); 
    // 
    var imgPath "/bpa-images/Home Slideshow/"
    var 
    imgPrefix "image"
    var 
    imgSuffix ".jpg"
    // 
    function preloadComplete() 

        
    this.complete true

    function 
    preloadError() 

        
    this.complete false

    function 
    preloadImages() 

        for (var 
    x=1x<=maxImages; ++x
        { 
            
    myImages[x] = new Image(); 
            
    myImages[x].onerror preloadError
            
    myImages[x].onload preloadComplete
            
    myImages[x].src imgPath imgPrefix imgSuffix
        } 
        return 
    true

    preloadImages();

    ///// Plugin variables 

    playspeed=2000;// The playspeed determines the delay for the "Play" button in ms 
    dotrans=1// if value = 1 then there are transitions played in IE 
    transtype='blendTrans';// 'blendTrans' or 'revealtrans' 
    transattributes='23';// duration=seconds,transition=#<24 
    //##### 
    //key that holds where in the array currently are 
    i=0


    //########################################### 
    //if random 
    function SetRandom() { 
        
    tempimage = new Array(); 
        for(
    p=0p<theimage.lengthp++){ 
            for(
    p1=0p1>-1p1) { 
                
    tempNum Math.floor(Math.random()*theimage.length
                if(!
    tempimage[tempNum]){ 
                    
    tempimage[tempNum]=theimage[p]; 
                    break; 
                } 
            } 
        } 
        for(
    p=0;p<theimage.length;p++)theimage[p]=tempimage[p]; 


    //if random order 
    SetRandom() 


    //########################################### 
    window.onload=function(){ 

        
    //preload images into browser 
        
    preloadSlide(); 

        
    //set transitions 
        
    GetTrans(); 

        
    //set the first slide 
        
    SetSlide(0); 

        
    //autoplay 
        
    PlaySlide(); 


    //########################################### 
    function SetSlide(num) { 
        
    //too big 
        
    i=num%theimage.length
        
    //too small 
        
    if(i<0)i=theimage.length-1

        
    //switch the image 
        
    if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()'
        
    document.images.imgslide.src=theimage[i][0]; 
        if(
    document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()'




    //########################################### 
    function PlaySlide() { 
        if (!
    window.playing) { 
            
    PlayingSlide(i+1); 
            if(
    document.slideshow.play){ 
                
    document.slideshow.play.value="   Stop   "
            } 
        } 
        else { 
            
    playing=clearTimeout(playing); 
            if(
    document.slideshow.play){ 
                
    document.slideshow.play.value="   Play   "
            } 
        } 
        
    // if you have to change the image for the "playing" slide 
        
    if(document.images.imgPlay){ 
            
    setTimeout('document.images.imgPlay.src="'+imgStop+'"',1); 
            
    imgStop=document.images.imgPlay.src 
        




    //########################################### 
    function PlayingSlide(num) { 
        
    playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);'playspeed); 



    //########################################### 
    //desc: picks the transition to apply to the images 
    function GetTrans() { 
        
    //si=document.slideshow.trans.selectedIndex; 

            
    if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){ 
            
    dotrans=0
        } 
        else if ((
    document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){ 
            
    dotrans=1
            
    transtype='blendTrans'
            
    document.imgslide.style.filter "blendTrans(duration=1,transition=1)"
        }else{ 
            
    dotrans=1
            
    transtype='revealtrans'
            if(
    document.slideshow.transtransattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value
            
    document.imgslide.style.filter "revealTrans(duration=1,transition=" +transattributes")"
        } 


    //########################################### 
    function preloadSlide() { 
        for(
    k=0;k<theimage.length;k++) { 
            
    theimage[k][0]=new Image().src=theimage[k][0]; 
        } 



    </script> 


    <!-- slide show HTML --> 
    <form name="slideshow"> 

    <table width="288" height="432" border="1" cellpadding="1" cellspacing="0" bordercolor="#560D1C"> 
    <tr> 
        <td align="center"> 
        <a href="#" onmouseover="this.href=theimage[i][1];return false"> 
        <script type="text/javascript"> 
            document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">') 
        </script> 
        </a> 
        </td> 
    </tr> 
    </table> 

    </form> 
    What am I missing?

    Thanks for your time,
    Lorne

  12. #12
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    Have you tossed out the 'theimage' array? It is referenced several times within the script, and if doing without 'theimage' array you need to change those references

  13. #13
    Join Date
    Feb 2008
    Posts
    1,666
    Quote Originally Posted by lorne17 View Post
    I made the changes as you asked, it fixed my safari from bogging down. So that's good. But it doesn't show any images?? Do you know why this is?
    The code I gave you was just for performing a preload to determine the names of image files on your server. This code introduced a new array name. You must change your other code to reference this new array and to examine the complete property to determine if that image file name actually exists.

  14. #14
    Join Date
    Jan 2009
    Posts
    9
    Quote Originally Posted by MrNobody View Post
    The code I gave you was just for performing a preload to determine the names of image files on your server. This code introduced a new array name. You must change your other code to reference this new array and to examine the complete property to determine if that image file name actually exists.

    Ok now I know I'm a rookie, and I apologize, but I do see the image array references. I just don't know how to fix these? How do I change my other code to this new array and to examine the complete property to determine if that image file name actually exists? Sorry for the beginner questions. I am just new with this type of script.

    Thanks,
    Lorne

  15. #15
    Join Date
    Feb 2008
    Posts
    1,666
    Change your code where you have specified theimage as your old array name. Make that to be myImages as the new array name. Then, if there are any missing images on your server in the sequence number range you've specified, you'll need a test such as the following to determine if that image is present or not.
    Code:
    if(myImages[x].complete) {
    // use myImages[x].src to reference the image
    } else {
    // myImages[x].src represents a missing image
    }

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