DHTML Slide Show Script

**jbriceno28** · 04-09-2013, 01:30 PM

1) Script Title: DHTML Slide Show Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...dhtmlslide.htm

3) Describe problem: I was able to make this work perfectly fine but I am not sure how to make multiple on the same page. I have spry accordions and would like to have the slide show more than once. How would I separate the images so that the slide shows show different images? It says:

//define images. You can have as many as you want:
photos[0]="photo1.jpg"
photos[1]="photo2.jpg"
photos[2]="photo3.jpg"

So if I wanted a different slide show for "photo4.jpg", "photo5.jpg" and "photo6.jpg", how would I do this? How would I make different sets so that the different slide shows so different images? Hope I explained myself well. Thanks

**vwphillips** · 04-09-2013, 03:26 PM

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 type="text/javascript">

/***********************************************
* DHTML slideshow script-  © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function zxcEffect(o){
 var img=document.getElementById(o.ID),ary=o.Array,hold=o.AutoHold,cnt=0,z0=0;
 if (img&&typeof(ary)=='object'&&ary.constructor==Array){
  o.ary=[];
  for (var z0=0;z0<ary.length;z0++){
   if (ary[z0]&&ary[z0][0]){
    o.ary[cnt]=[new Image(),ary[z0][1]];
    o.ary[cnt][0].src=ary[z0][0];
    cnt++;
   }
  }
  o.img=img;
  o.a=img.parentNode.nodeName.toUpperCase()=='A'?img.parentNode:false;
  o.cnt=0;
  o.lgth=o.ary.length-1;
  o.hold=typeof(hold)=='number'&&hold>0?hold:5000;
  zxcEffect[o.ID]=o;
 }

}

function zxcEffectAuto(id,ms){
 var o=zxcEffect[id];
 if (o){
  o.to=setTimeout(function(){ zxcEffectNext(id,1,true); },typeof(ms)=='number'&&ms>0?ms:200);
 }
}

function zxcEffectPause(id){
 var o=zxcEffect[id],ud=typeof(ud)=='number'?ud<0?-1:1:1;
 if (o){
  clearTimeout(o.to);
 }
}

function zxcEffectNext(id,ud,auto){
 var o=zxcEffect[id],ud=typeof(ud)=='number'?ud<0?-1:1:1;
 if (o){
  zxcEffectPause(id);
  o.cnt+=ud;
  o.cnt=o.cnt<0?o.lgth:o.cnt>o.lgth?0:o.cnt;
  o.img.filters.revealTrans.Transition=Math.floor(Math.random()*23)
  o.img.filters.revealTrans.stop()
  o.img.filters.revealTrans.apply()
  o.img.src=o.ary[o.cnt][0].src;
  o.img.filters?o.img.filters.revealTrans.play():null;
  window.status="Image "+(o.cnt+1)+" of "+o.lgth;
  if (o.a){
   o.a.removeAttribute('href');
   o.ary[o.cnt][1]?o.a.href=o.ary[o.cnt][1]:null;
  }
  auto?zxcEffectAuto(id,o.hold):null;
 }
}

</script>
</head>

<body>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" colspan="2" height="22"><center>
    <a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" id="photoslider1" style="filter:revealTrans(duration=2,transition=23)" border=0></center></td>
<script type="text/javascript">
/*<![CDATA[*/
zxcEffect({
  ID:'photoslider1',  // the uniuque ID name of the image.                              (string)
  Array:[             // an array of arrays defining the image SRCs and optional HREFs. (array)
   // field 0 = the image SRC
   // field 0 = the optional HREF of the image parent link.
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.dynamicdrive.com/']
  ],
  AutoHold:4000       //(optional) the auto rotate hold delay in milli seconds.         (number, default = 4000)
});
/*]]>*/
</script>  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="zxcEffectNext('photoslider1',-1);return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="zxcEffectNext('photoslider1',1);return false">Next Slide</a></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="zxcEffectAuto('photoslider1');return false">Auto</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="zxcEffectPause('photoslider1');return false">Pause</a></td>
  </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" colspan="2" height="22"><center>
    <a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" id="photoslider2" style="filter:revealTrans(duration=2,transition=23)" border=0></a></center></td>
<script type="text/javascript">
/*<![CDATA[*/
zxcEffect({
  ID:'photoslider2',
  Array:[
   // field 0 = the image SRC
   // field 0 = the Optional HREF of the image parent link.
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg','http://www.dynamicdrive.com/']
  ],
  AutoHold:4000
});
/*]]>*/
</script>  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="zxcEffectNext('photoslider2',-1);return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="zxcEffectNext('photoslider2',1);return false">Next Slide</a></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="zxcEffectAuto('photoslider2');return false">Auto</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="zxcEffectPause('photoslider2');return false">Pause</a></td>
  </tr>
</table>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</body>

</html>

**jbriceno28** · 04-09-2013, 04:47 PM

Originally Posted by vwphillips

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 type="text/javascript">

/***********************************************
* DHTML slideshow script-  © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function zxcEffect(o){
 var img=document.getElementById(o.ID),ary=o.Array,hold=o.AutoHold,cnt=0,z0=0;
 if (img&&typeof(ary)=='object'&&ary.constructor==Array){
  o.ary=[];
  for (var z0=0;z0<ary.length;z0++){
   if (ary[z0]&&ary[z0][0]){
    o.ary[cnt]=[new Image(),ary[z0][1]];
    o.ary[cnt][0].src=ary[z0][0];
    cnt++;
   }
  }
  o.img=img;
  o.a=img.parentNode.nodeName.toUpperCase()=='A'?img.parentNode:false;
  o.cnt=0;
  o.lgth=o.ary.length-1;
  o.hold=typeof(hold)=='number'&&hold>0?hold:5000;
  zxcEffect[o.ID]=o;
 }

}

function zxcEffectAuto(id,ms){
 var o=zxcEffect[id];
 if (o){
  o.to=setTimeout(function(){ zxcEffectNext(id,1,true); },typeof(ms)=='number'&&ms>0?ms:200);
 }
}

function zxcEffectPause(id){
 var o=zxcEffect[id],ud=typeof(ud)=='number'?ud<0?-1:1:1;
 if (o){
  clearTimeout(o.to);
 }
}

function zxcEffectNext(id,ud,auto){
 var o=zxcEffect[id],ud=typeof(ud)=='number'?ud<0?-1:1:1;
 if (o){
  zxcEffectPause(id);
  o.cnt+=ud;
  o.cnt=o.cnt<0?o.lgth:o.cnt>o.lgth?0:o.cnt;
  o.img.filters.revealTrans.Transition=Math.floor(Math.random()*23)
  o.img.filters.revealTrans.stop()
  o.img.filters.revealTrans.apply()
  o.img.src=o.ary[o.cnt][0].src;
  o.img.filters?o.img.filters.revealTrans.play():null;
  window.status="Image "+(o.cnt+1)+" of "+o.lgth;
  if (o.a){
   o.a.removeAttribute('href');
   o.ary[o.cnt][1]?o.a.href=o.ary[o.cnt][1]:null;
  }
  auto?zxcEffectAuto(id,o.hold):null;
 }
}

</script>
</head>

<body>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" colspan="2" height="22"><center>
    <a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" id="photoslider1" style="filter:revealTrans(duration=2,transition=23)" border=0></center></td>
<script type="text/javascript">
/*<![CDATA[*/
zxcEffect({
  ID:'photoslider1',  // the uniuque ID name of the image.                              (string)
  Array:[             // an array of arrays defining the image SRCs and optional HREFs. (array)
   // field 0 = the image SRC
   // field 0 = the optional HREF of the image parent link.
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.dynamicdrive.com/']
  ],
  AutoHold:4000       //(optional) the auto rotate hold delay in milli seconds.         (number, default = 4000)
});
/*]]>*/
</script>  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="zxcEffectNext('photoslider1',-1);return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="zxcEffectNext('photoslider1',1);return false">Next Slide</a></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="zxcEffectAuto('photoslider1');return false">Auto</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="zxcEffectPause('photoslider1');return false">Pause</a></td>
  </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" colspan="2" height="22"><center>
    <a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" id="photoslider2" style="filter:revealTrans(duration=2,transition=23)" border=0></a></center></td>
<script type="text/javascript">
/*<![CDATA[*/
zxcEffect({
  ID:'photoslider2',
  Array:[
   // field 0 = the image SRC
   // field 0 = the Optional HREF of the image parent link.
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg'],
   ['http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg','http://www.dynamicdrive.com/']
  ],
  AutoHold:4000
});
/*]]>*/
</script>  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="zxcEffectNext('photoslider2',-1);return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="zxcEffectNext('photoslider2',1);return false">Next Slide</a></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="zxcEffectAuto('photoslider2');return false">Auto</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="zxcEffectPause('photoslider2');return false">Pause</a></td>
  </tr>
</table>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</body>

</html>

Thank you so much for replying. I'm kind of new at this. The code you gave me works (thanks), I see 2 slideshows instead of just 1 and I got them to be in separate spry accordions, as well. However, when I click Next Slide, it doesn't go to the next slide. Instead, it just goes to the top of the page. The page refreshes I guess? Don't know what I'm doing wrong :/

**ajfmrf** · 04-09-2013, 09:51 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

**vwphillips** · 04-10-2013, 12:41 AM

Code:

    <td width="50%" height="21"><p align="left"><a href="#" onClick="zxcEffectAuto('photoslider2');return false">Auto</a></td>

the return false stops the link from calling the HREF

you could also use one of these methods

Code:

    <td width="50%" height="21"><p align="left"><a  onClick="zxcEffectAuto('photoslider2');">Auto</a></td>
    <td width="50%" height="21"><p align="right"><a href="javascript:zxcEffectPause('photoslider2');" >Pause</a></td>