Log in

View Full Version : Question about Blending Image Slideshow



ConnectionsForArt
10-30-2013, 07:00 PM
1) Script Title: Blending Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/image4.htm

3) Describe problem: I would like to use 2 different slideshows on the same page. Is this possible? How would I do it? How would I differentiate one from the other?

vwphillips
10-31-2013, 01:16 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>
<base href="http://www.vicsjavascripts.org.uk/StdImages/" />
</head>

<body>
<a ><img src="1.gif" id="slide" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100
onmouseover="slideitPause('slide');"
onmouseout="slideitAuto('slide');"
></a>
<a ><img src="1.gif" id="slide" name="slide2" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

<script type="text/javascript">
<!--
//*****************************************
// Blending Image Slide Show Script-
// © Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
// Modified 31-October-2013)
//*****************************************

function slideitPause(id){
var o=slideit[id];
o?clearTimeout(o.to):null;
}

function slideitAuto(id){
var o=slideit[id];
o?o.to=setTimeout(function(){ slideit(o); },200):null;
}

function slideit(op){
var id=op.ImageID,o=slideit[id],img=document.getElementById(id);
if (img&&!o){
o=op;
o.ary=op.ImageArray;
for (var h=op.AutoHold,src,z0=0;z0<o.ary.length;z0++){
src=o.ary[z0][0];
o.ary[z0][0]=new Image();
o.ary[z0][0].src=src;
}
o.n=0;
o.hold=typeof(h)=='number'&&h>0?h:1000;
o.blend=(document.all)? document.images.slide.filters[0].duration*1000:0;
slideit[id]=o;
}
if (o){
clearTimeout(o.to);
img.parentNode.removeAttribute('href');
o.ary[o.n][1]?img.parentNode.href=o.ary[o.n][1]:null;
o.blend?img.filters[0].apply():null;
img.src=o.ary[o.n][0].src;
o.blend?img.filters[0].play():null;
o.n=++o.n%o.ary.length;
o.to=setTimeout(function(){ slideit(o); },o.hold+o.blend);
}
}

slideit({
ImageID:'slide', // the unique ID name of the image. (string)
ImageArray:[ // an array of arrats defining the image SRCs and HREFs. (array)
// field 0 - the image SRCs
// field 1 - (optional) the image link HREFs
['1.gif','http://www.vicsjavascripts.org.uk/StdImages/'],
['2.gif'],
['3.gif']
],
AutoHold:1000 //(optional) the auto rotate 'hold' delay in millsec. (number, default = 1000)
})

slideit({
ImageID:'slide2',
ImageArray:[
['4.gif'],
['5.gif'],
['6.gif']
],
AutoHold:1000
})

//-->
</script>

</body>

</html>