PDA

View Full Version : 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/dynamicindex14/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
<!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
<!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
<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


<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>