Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Random image cycle question

    Hello,

    I'm relatively new to Javascript, and I'm trying to put together a slideshow of images that updates with a random image every 10-20 seconds.

    I found one script that did this here: http://javascript.internet.com/misce...e-rotator.html, but unfortunately the script preloads all the images, and as I have about 100 of them this isn't practical!

    Is there a way to do the same thing without preloading any images, and without refreshing the page?

    Thanks in advance!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    You could show the first image always the same while the remainder load, or randomly select the first image from (say) five, again while the remaining 95 load.

  • Users who have thanked Philip M for this post:

    quandry (06-14-2008)

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Code:
    <html>
    <head>
    <title>random cows</title>
    </head>
    <body onload="newPic()">
    
    <img id="view" />
    
    <script>//a wee bit of support code
    function Rnd(w) {return parseInt(Math.random() * (w + 1));}
    Array.prototype.random=function () {return this[Rnd(this.length - 1)];}
    
    
    //the images urls in csv format:
    myImageList = "http://www.usda.gov/oc/photo/01c0227.jpg,http://www.usda.gov/oc/photo/01c0229.jpg,http://www.usda.gov/oc/photo/01c0230.jpg,http://www.usda.gov/oc/photo/01c0235.jpg,http://www.usda.gov/oc/photo/01c0236.jpg,http://www.usda.gov/oc/photo/01c0237.jpg,http://www.usda.gov/oc/photo/01c0238.jpg,http://www.usda.gov/oc/photo/01c0240.jpg,http://www.usda.gov/oc/photo/01c0243.jpg,http://www.usda.gov/oc/photo/01c0246.jpg,http://www.usda.gov/oc/photo/01c0249.jpg,http://www.usda.gov/oc/photo/01c1399.jpg,http://www.usda.gov/oc/photo/01c1400.jpg,http://www.usda.gov/oc/photo/01c1404.jpg,http://www.usda.gov/oc/photo/01c1405.jpg,http://www.usda.gov/oc/photo/01c1341.jpg,http://www.usda.gov/oc/photo/01c1345.jpg,http://www.usda.gov/oc/photo/01c1356.jpg,http://www.usda.gov/oc/photo/01c1378.jpg,http://www.usda.gov/oc/photo/01c1380.jpg"
    
    function newPic(){
       document.getElementById("view").src= imgArray.random();
       setTimeout(newPic, Rnd(10)+10 * 1000);
    }
    
    imgArray= myImageList.split(/\,\s*/g); //turn text list into js array
    
    </script>
    </body>
    </html>
    Last edited by rnd me; 06-14-2008 at 07:54 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • Users who have thanked rnd me for this post:

    quandry (06-14-2008)

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    rnd me

    I was going to answer this on webdeveloper but saw your post
    but would suggest to prevent the random image being the current image

    Code:
    function newPic(){
       var imgobj=document.getElementById("view");
       var nimg=imgArray.random();
       if (imgobj.src==nimg) return newPic();
       imgobj.src=nimg;
       setTimeout(newPic, Rnd(10)+10 * 1000);
    }
    http://www.webdeveloper.com/forum/sh...200#post899200
    Last edited by vwphillips; 06-14-2008 at 12:13 PM. Reason: added link
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    quandry (06-14-2008)

  • #5
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you all for your help! That's exactly what I'm looking for!

    I'm also having difficulty embedding this into an HTML table - It seems to default to the top left hand of the page!

    Can anybody help me out here also?

    Many thanks!

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    best to post a link to your page or the code
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Well, the code is as you and rnd me suggested above, only I wish to put that into an HTML table. So far, I tried:

    <div align="center">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <table width="555" height="465" border="0" cellspacing="0">
    <tr>
    <td height="355" bgcolor="#CCCCCC"><div align="center"><br>
    <br>

    <script>//a wee bit of support code
    function Rnd(w) {return parseInt(Math.random() * (w + 1));}
    Array.prototype.random=function () {return this[Rnd(this.length - 1)];}


    //the images urls in csv format:
    myImageList = "http://www.usda.gov/oc/photo/01c0227.jpg,http://www.usda.gov/oc/photo/01c0229.jpg,http://www.usda.gov/oc/photo/01c0230.jpg,http://www.usda.gov/oc/photo/01c0235.jpg,http://www.usda.gov/oc/photo/01c0236.jpg,http://www.usda.gov/oc/photo/01c0237.jpg,http://www.usda.gov/oc/photo/01c0238.jpg,http://www.usda.gov/oc/photo/01c0240.jpg,http://www.usda.gov/oc/photo/01c0243.jpg,http://www.usda.gov/oc/photo/01c0246.jpg,http://www.usda.gov/oc/photo/01c0249.jpg,http://www.usda.gov/oc/photo/01c1399.jpg,http://www.usda.gov/oc/photo/01c1400.jpg,http://www.usda.gov/oc/photo/01c1404.jpg,http://www.usda.gov/oc/photo/01c1405.jpg,http://www.usda.gov/oc/photo/01c1341.jpg,http://www.usda.gov/oc/photo/01c1345.jpg,http://www.usda.gov/oc/photo/01c1356.jpg,http://www.usda.gov/oc/photo/01c1378.jpg,http://www.usda.gov/oc/photo/01c1380.jpg"

    function newPic(){
    var imgobj=document.getElementById("view");
    var nimg=imgArray.random();
    if (imgobj.src==nimg) return newPic();
    imgobj.src=nimg;
    setTimeout(newPic, Rnd(10)+10 * 1000);
    }

    imgArray= myImageList.split(/\,\s*/g); //turn text list into js array

    </script>
    </div>
    </td>
    </tr>
    <tr>
    <td height="61" align="center" valign="middle" bgcolor="#CCCCCC"><div align="center" class="style1"><br>
    <br>
    <br>
    </div></td>
    </tr>
    </table>

    ...But this doesn't seem to do it! Any ideas?

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script>//a wee bit of support code
    function Rnd(w) {return parseInt(Math.random() * (w + 1));}
    Array.prototype.random=function () {return this[Rnd(this.length - 1)];}
    
    
    //the images urls in csv format:
    myImageList = "http://www.vicsjavascripts.org.uk/StdImages/One.gif,http://www.vicsjavascripts.org.uk/StdImages/Two.gif,http://www.vicsjavascripts.org.uk/StdImages/Three.gif,http://www.vicsjavascripts.org.uk/StdImages/Four.gif"
    
    function newPic(){
    var imgobj=document.getElementById("view");
    var nimg=imgArray.random();
    if (imgobj.src==nimg) return newPic();
    imgobj.src=nimg;
    setTimeout(newPic, Rnd(10)+10 * 1000);
    }
    
    imgArray= myImageList.split(/\,\s*/g); //turn text list into js array
    
    </script>
    </head>
    
    <body onload="newPic();">
    <div align="center">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <table width="555" height="465" border="0" cellspacing="0">
    <tr>
    <td height="355" bgcolor="#CCCCCC"><div align="center"><br>
    <br>
    
    </td>
    </tr>
    <tr>
    <td height="61" align="center" valign="middle" bgcolor="#CCCCCC">
    <div align="center" class="style1"><br>
    <img id="view" src="One.gif" width="100" height="100" />
    <br>
    <br>
    </div>
    </td>
    </tr>
    </table>
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    quandry (06-14-2008)

  • #9
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Oh fantastic! Thank you for your help - that's saved me hours of headaches!


  •  

    Posting Permissions

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