SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast Danopoly's Avatar
    Join Date
    May 2005
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript random images

    http://www.sitepoint.com/forums/showthread.php?t=310921
    (I'm reposting my question here, since I was told in this thread that javascript/client-side scripting would be better).

    I have seen lots of PHP scripts and javascripts for what I need, but none that seem to fit exactly.

    I'd like a simple page with two image windows, the same size, one on the upper left and one on the upper right. The images are about 250 x 200. I'd like the pictures in these panes to change randomly. It's sort of a slideshow, except that I'd like the images to change from a random pool of images and it will be automatic; there will be no previous/next buttons or links.

    I've seen a PHP slideshow that did this, but only when the page was refreshed. I've seen javascript slideshows, as well. I've used a Dreamweaver extension called flevOOware in the past.

    Can anyone recommend some javascript that would work for this? Ideally it could work for multiple images on a page.

    Thanks,
    Dan

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImgAry=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
    var ImgAry2=new Array('Up1.gif','Left1.gif','Down1.gif','Right1.gif');
    
    
    var RandomAry=new Array();
    
    function amRandomise(amAry){
     amT0=0;
     amTempAry0=new Array();
     for (am1=0;am1<amAry.length;am1++){
      amTempAry0[am1]='^';
     }
     while (amT0<amAry.length){
      amTemp=Math.floor(Math.random()*amAry.length-1)+1;
      if (amTempAry0[amTemp]=='^'){amTempAry0[amTemp]=amAry[amT0]; amT0++; }
     }
     for (am1=0;am1<amAry.length;am1++){
      amAry[am1]=amTempAry0[am1];
     }
     return amAry
    }
    
    function RotateRandom(id,path,ary){
     obj=document.getElementById(id);
     obj.cnt=0;
     obj.path=path;
     obj.ary=amRandomise(ary);
     RandomAry[RandomAry.length]=obj;
     if (RandomAry.length==1){ RotateRandomDo(); }
    }
    
    function RotateRandomDo(){
     for (zxc0=0;zxc0<RandomAry.length;zxc0++){
      RandomAry[zxc0].src=RandomAry[zxc0].path+RandomAry[zxc0].ary[RandomAry[zxc0].cnt];
      RandomAry[zxc0].cnt++;
      if (RandomAry[zxc0].cnt==RandomAry[zxc0].ary.length){ RandomAry[zxc0].cnt=0; }
     }
     setTimeout('RotateRandomDo()',1000);
    }
    
    
    //-->
    </script>
    </head>
    
    <body onload="RotateRandom('MyRandomImages3',ImgPath,ImgAry);RotateRandom('MyRandomImages4',ImgPath,ImgAry2);" >
    <img id="MyRandomImages3" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="150" height="150"
    <br>
    <br>
    <img id="MyRandomImages4" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="150" height="150"
    
    </body>
    
    </html>

  3. #3
    SitePoint Enthusiast Danopoly's Avatar
    Join Date
    May 2005
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks!

    Thanks so much. My question now is that I have a navigation bar that also uses the <body onLoad=""> tag. Can I just combine the two lines?

    When I add your code to the page, Dreamweaver gives highlights the "extra" <body onLoad> tag and doesn't play nice.

    Apologies, all. I'm moving from mostly using code within Dreamweaver to actually hamfisting that code manually. My results vary from "It Works!" to "Homer Simpson's Spice Rack".

    Thanks so much for your help! This is really useful to have.

    Dan

  4. #4
    SitePoint Enthusiast Danopoly's Avatar
    Join Date
    May 2005
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, some more questions before you're even ready with the first set.

    I'm having problems changing the image locations in the code you included.

    Assuming my images are in:
    "/images/picture.jpg"

    I change this part of the code:

    Code:
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImgAry=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
    var ImgAry2=new Array('Up1.gif','Left1.gif','Down1.gif','Right1.gif');
    and this part:

    Code:
    <body onload="RotateRandom('MyRandomImages3',ImgPath,ImgAry);RotateRandom('MyRandomImages4',  ImgPath,ImgAry2);" >
    <img id="MyRandomImages3" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="150" height="150">
    <br>
    <br>
    <img id="MyRandomImages4" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="150" height="150">
    Is this correct?

    Thanks!
    Dan

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the id of the image to rotate is specified in RotateRandom('MyRandomImages3',ImgPath,ImgAry);

    this id name can be any unique name

    as can any of the image features

    use whatever images and path you require
    just declare the variable name in the call

    there can be only one onload event, just add all the calls to this event

    you will see there are two calls in the code I posted


    dreamweaver - ugg

  6. #6
    SitePoint Enthusiast Danopoly's Avatar
    Join Date
    May 2005
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got it working, except that the images are slightly out of sync. This is very noticable if it's faster.

    Is there any way to adjust the speed?

    Your help has been terrific.

    Thanks,
    Dan

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    setTimeout('RotateRandomDo()',1000);

    change the 1000(1 second) to 5000(5 seconds)

    changing the src creates the sync problem, would need to layer the images to resolve

  8. #8
    SitePoint Enthusiast Danopoly's Avatar
    Join Date
    May 2005
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vic, thanks so much for all of your help. The end result looks and works great.

    I didn't need to adjust the images in layers after all. Once I changed the speed to 5 seconds, it seemed to be fine.

    This site is a great resource!
    Dan

  9. #9
    SitePoint Evangelist AsianGirl's Avatar
    Join Date
    Oct 2003
    Location
    U.S.A
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Vic

    thanks for the code ...now my question is ...

    I don't want 2 images to load at the same time... I want image1 to load then 3 seconds later image2 loads ...then 3 seconds later image1 loads...then 3 seconds later image2 loads...and so on ... what do I have to do to make this happen ?

    Thanks

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image Rotate (12-12-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImgAry=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
    var ImgAry2=new Array('Up1.gif','Left1.gif','Down1.gif','Right1.gif');
    
    
    var zxcCnt=0;
    
    
    function zxcRotateRandom(zxcid,zxcpath,zxcary,zxcdly){
     zxcobj=document.getElementById(zxcid);
     zxcobj.ary=new Array();
     for (zxc0=0;zxc0<zxcary.length;zxc0++){
      zxcimg=document.createElement('IMG');
      zxcimg.src=zxcpath+zxcary[zxc0];
      zxcimg.width=zxcobj.offsetWidth;
      zxcimg.height=zxcobj.offsetHeight;
      zxcimg.style.position='absolute';
      zxcimg.style.zIndex=0;
      zxcobj.appendChild(zxcimg);
      zxcobj.ary[zxcobj.ary.length]=zxcimg.style;
     }
     zxcobj.start=new zxcAddFunctions(zxcobj,zxcdly);
     zxccnt=Math.floor(Math.random()*zxcobj.ary.length-1)+1;
     zxcobj.ary[zxccnt].zIndex=1;
     zxcobj.start.last=zxcobj.ary[zxccnt];
     zxcobj.start.rotate();
    }
    
    
    
    function zxcAddFunctions(zxcobj,zxcdly){
     this.obj=zxcobj;
     this.ref='zxcrotate'+zxcCnt;
     window[this.ref]=this;
     this.last=null;
     this.cnt=null;
     this.dly=zxcdly;
    
     this.setTimeOut= function(zxcf,zxcd){
      this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
     }
    
     this.rotate=function(){
      if (this.last){ this.last.zIndex=0; }
      this.cnt=Math.floor(Math.random()*this.obj.ary.length-1)+1;
      if (this.last==this.obj.ary[this.cnt]){ this.rotate(); }
      this.obj.ary[this.cnt].zIndex=1;
      this.last=this.obj.ary[this.cnt];
      this.setTimeOut("rotate();",this.dly);
     }
     zxcCnt++;
    }
    
    
    //-->
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function InitScripts(){
    //                             ID               Path   Ary    Interval  start deley
     setTimeout("zxcRotateRandom('MyRandomImages3',ImgPath,ImgAry,2000);",3000);
     setTimeout("zxcRotateRandom('MyRandomImages4',ImgPath,ImgAry2,2000);",3000);
    }
    //-->
    </script></head>
    
    <body onload="InitScripts()" >
    <div  id="MyRandomImages3" style="position:relative;width:150px;height:150px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=150 height=150 style="position:absolute;" >
    </div>
    <br>
    <br>
    <br>
    <br><br><br>
    <div  id="MyRandomImages4" style="position:relative;width:50px;height:50px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=50 height=50  style="position:absolute;" >
    </div>
    
    </body>
    
    </html>

  11. #11
    SitePoint Evangelist AsianGirl's Avatar
    Join Date
    Oct 2003
    Location
    U.S.A
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your help!!!

  12. #12
    SitePoint Evangelist AsianGirl's Avatar
    Join Date
    Oct 2003
    Location
    U.S.A
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i got an error

    unexpected call to method or property access

  13. #13
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    strange the script jammed after running 3 or three minutes, I dont know why but I have removed the line checking for duplicates which stopped the problem

    Try this version

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image Rotate (12-12-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImgAry=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
    var ImgAry2=new Array('Up1.gif','Left1.gif','Down1.gif','Right1.gif');
    
    
    var zxcCnt=0;
    
    
    function zxcRotateRandom(zxcid,zxcpath,zxcary,zxcdly){
     zxcobj=document.getElementById(zxcid);
     zxcobj.ary=new Array();
     for (zxc0=0;zxc0<zxcary.length;zxc0++){
      zxcimg=document.createElement('IMG');
      zxcimg.src=zxcpath+zxcary[zxc0];
      zxcimg.width=zxcobj.offsetWidth;
      zxcimg.height=zxcobj.offsetHeight;
      zxcimg.style.position='absolute';
      zxcimg.style.zIndex=0;
      zxcimg.style.visibility='hidden';
      zxcobj.appendChild(zxcimg);
      zxcobj.ary[zxcobj.ary.length]=zxcimg.style;
     }
     zxcobj.start=new zxcAddFunctions(zxcobj,zxcdly);
     zxccnt=Math.floor(Math.random()*zxcobj.ary.length-1)+1;
     zxcobj.ary[zxccnt].zIndex=1;
     zxcobj.start.rotate();
    }
    
    function zxcAddFunctions(zxcobj,zxcdly){
     this.obj=zxcobj;
     this.ref='zxcrotate'+zxcCnt;
     window[this.ref]=this;
     this.last=null;
     this.cnt=null;
     this.dly=zxcdly;
    
     this.setTimeOut= function(zxcf,zxcd){
      this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
     }
    
     this.rotate=function(){
      this.cnt=Math.floor(Math.random()*this.obj.ary.length-1)+1;
    //  if (this.last==this.obj.ary[this.cnt]){ this.rotate(); }
      if (this.last){ this.last.zIndex=0; }
      this.obj.ary[this.cnt].zIndex=1;
      this.obj.ary[this.cnt].visibility='visible';
      this.last=this.obj.ary[this.cnt];
      this.setTimeOut("rotate();",this.dly);
     }
     zxcCnt++;
    }
    
    
    //-->
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function InitScripts(){
    //                             ID               Path   Ary    Interval  start deley
     setTimeout("zxcRotateRandom('MyRandomImages3',ImgPath,ImgAry,1000);",3000);
     setTimeout("zxcRotateRandom('MyRandomImages4',ImgPath,ImgAry2,800);",3010);
    }
    //-->
    </script></head>
    
    <body onload="InitScripts()" >
    <div  id="MyRandomImages3" style="position:relative;width:150px;height:150px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=150 height=150 style="position:absolute;" >
    </div>
    <br>
    <br>
    <br>
    <br><br><br>
    <div  id="MyRandomImages4" style="position:relative;width:50px;height:50px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=50 height=50  style="position:absolute;" >
    </div>
    
    </body>
    
    </html>

  14. #14
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this using a while loop yto check dup images has been running 1hr without any problem

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Image Rotate (12-12-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImgAry=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
    var ImgAry2=new Array('Up1.gif','Left1.gif','Down1.gif','Right1.gif');
    
    
    var zxcCnt=0;
    
    
    function zxcRotateRandom(zxcid,zxcpath,zxcary,zxcdly){
     zxcobj=document.getElementById(zxcid);
     zxcobj.ary=new Array();
     for (zxc0=0;zxc0<zxcary.length;zxc0++){
      zxcimg=document.createElement('IMG');
      zxcimg.src=zxcpath+zxcary[zxc0];
      zxcimg.width=zxcobj.offsetWidth;
      zxcimg.height=zxcobj.offsetHeight;
      zxcimg.style.position='absolute';
      zxcimg.style.zIndex=0;
      zxcimg.style.visibility='hidden';
      zxcobj.appendChild(zxcimg);
      zxcobj.ary[zxcobj.ary.length]=zxcimg.style;
     }
     zxcobj.start=new zxcAddFunctions(zxcobj,zxcdly);
     zxccnt=Math.floor(Math.random()*zxcobj.ary.length-1)+1;
     zxcobj.ary[zxccnt].zIndex=1;
     zxcobj.start.rotate();
    }
    
    function zxcAddFunctions(zxcobj,zxcdly){
     this.obj=zxcobj;
     this.ref='zxcrotate'+zxcCnt;
     window[this.ref]=this;
     this.last=null;
     this.cnt=null;
     this.dly=zxcdly;
    
     this.setTimeOut= function(zxcf,zxcd){
      this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
     }
    
     this.rotate=function(){
      while (this.last==this.obj.ary[this.cnt]){ this.cnt=Math.floor(Math.random()*this.obj.ary.length-1)+1; }
      if (this.last){ this.last.zIndex=0; }
      this.obj.ary[this.cnt].zIndex=1;
      this.obj.ary[this.cnt].visibility='visible';
      this.last=this.obj.ary[this.cnt];
      this.setTimeOut("rotate();",this.dly);
     }
     zxcCnt++;
    }
    
    
    //-->
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function InitScripts(){
    //                             ID               Path   Ary    Interval  start deley
     setTimeout("zxcRotateRandom('MyRandomImages3',ImgPath,ImgAry,1000);",3000);
     setTimeout("zxcRotateRandom('MyRandomImages4',ImgPath,ImgAry2,800);",3010);
    }
    //-->
    </script></head>
    
    <body onload="InitScripts()" >
    <div  id="MyRandomImages3" style="position:relative;width:150px;height:150px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=150 height=150 style="position:absolute;" >
    </div>
    <br>
    <br>
    <br>
    <br><br><br>
    <div  id="MyRandomImages4" style="position:relative;width:50px;height:50px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=50 height=50  style="position:absolute;" >
    </div>
    
    </body>
    
    </html>

  15. #15
    SitePoint Evangelist AsianGirl's Avatar
    Join Date
    Oct 2003
    Location
    U.S.A
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Vic!! really appreciate your help


Bookmarks

Posting Permissions

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