Changes Images

Web Design (WordPress, Joomla, etc.)

Changes Images

Posted by Jeff Kelley on May 19, 2008 at 4:30 pm

Does anyone know of a java script that would periodically change an image on the screen? I would like about 25 to 30 images to cycle through on the screen, each one staying on for about 10 seconds.

Right now I’ve just been making a large animated gif, but that not a good way to go about it.

Thanks,
Jeff

Jeff Kelley replied 18 years, 3 months ago 3 Members · 3 Replies
3 Replies

Curtis Thompson
May 19, 2008 at 4:39 pm

hello…

ya – it’s fairly straightforward javascript – you can change an image by altering it’s src property to any url, and then it’s just a case of doing a timeout in between…

i’d start here:

https://www.google.com/search?q=javascript+slideshow

you can find a ton of free ones and examples out there…

sitruc

Abraham Chaffin

May 19, 2008 at 5:00 pm

I like to use Dreamweaver’s swap image function executed with the javascript timeout function and an array of images. Here’s an example of that idea in a tutorial:

https://www.communitymx.com/content/article.cfm?cid=651FF

I’ve hacked up a version of that and placed the code below – should work –

Have fun!

<head>
<script type="text/javascript">
  <!--
  // Comma separated list of images to rotate
  var imgs = new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg');
  // delay in milliseconds between image swaps 1000 = 1 second
  var delay = 5000;
  var counter = 0;
function rotateimages(){
  if(counter == (imgs.length)){
  counter = 0;
  }
  MM_swapImage('Image1', '', imgs[counter++]);
  setTimeout('rotateimages()', delay);
  }
function preloadImgs(){
  for(var i=0;i<imgs.length;i++){
  MM_preloadImages(imgs[i]);
  }
  }
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  }
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  }
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
  }
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  }
//-->
  </script>
</head>
<body onload="preloadImgs();rotateimages();">
<img src="images/initialimage.jpg" name="Image1" width="125" height="125" border="0" id="Image1" />
</body>

Abraham

Jeff Kelley
May 19, 2008 at 9:30 pm

Thanks for the response.

Reply to this Discussion! Login or Sign Up

Creative Communities of the World Forums