PDA

View Full Version : Blending Image Slideshow Script Multiple Slideshows



torgasm
08-19-2010, 01:13 PM
1) Script Title: Blending Image Slideshow Script

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

3) I was wondering, is it possible to have multiple slideshows from the same script? I need to use this effect quote a few times and pasting this script several times in my code worries me it'll making some error for me and it'll be too cluttered.

Is there a way to do this?

vwphillips
08-19-2010, 02:41 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>
</head>

<body>
<a id="tst" href="http://www.dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/bs00847a.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
<a id="tst1" href="http://www.dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/bs00847a.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

<script type="text/javascript">
/*<![CDATA[*/

function SlideIt(o){
this.lk=document.getElementById(o.ID);
this.img=this.lk.getElementsByTagName('IMG')[0];
var imgary=o.ImageArray||[];
var lkary=o.LinkArray||[];
this.ary=[];
for (var z0=0;z0<imgary.length;z0++){
this.ary[z0]=[new Image(),lkary[z0]||false];
this.ary[z0][0].src=imgary[z0];
}
this.ie=document.all||false;
this.blenddelay=(this.ie)?document.images.slide.filters[0].duration*1000 : 0;
this.slidespeed=o.Duration||1000;
this.cnt=0;
}

SlideIt.prototype.Rotate=function(){
if (this.ie){
this.img.filters[0].apply();
}
this.img.src=this.ary[this.cnt][0].src;
if (this.ie){
this.img.filters[0].play()
}
this.lk.href=this.ary[this.cnt][1];
this.cnt=++this.cnt%this.ary.length;
var oop=this;
setTimeout(function(){ oop.Rotate(); },this.slidespeed+this.blenddelay)

}


var S=new SlideIt({
ID:'tst',
ImageArray:["http://www.dynamicdrive.com/dynamicindex4/bs00825a.gif","http://www.dynamicdrive.com/dynamicindex4/hh01478a.gif","http://www.dynamicdrive.com/dynamicindex4/bs00847a.gif"],
LinkArray:["http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com"],
Duration:1000
});

S.Rotate();

S=new SlideIt({
ID:'tst1',
ImageArray:["http://www.dynamicdrive.com/dynamicindex4/bs00825a.gif","http://www.dynamicdrive.com/dynamicindex4/hh01478a.gif","http://www.dynamicdrive.com/dynamicindex4/bs00847a.gif"],
LinkArray:["http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com"],
Duration:2500
});

S.Rotate();

/*]]>*/
</script>
</body>

</html>

torgasm
08-19-2010, 04:40 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>
</head>

<body>
<a id="tst" href="http://www.dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/bs00847a.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
<a id="tst1" href="http://www.dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/bs00847a.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

<script type="text/javascript">
/*<![CDATA[*/

function SlideIt(o){
this.lk=document.getElementById(o.ID);
this.img=this.lk.getElementsByTagName('IMG')[0];
var imgary=o.ImageArray||[];
var lkary=o.LinkArray||[];
this.ary=[];
for (var z0=0;z0<imgary.length;z0++){
this.ary[z0]=[new Image(),lkary[z0]||false];
this.ary[z0][0].src=imgary[z0];
}
this.ie=document.all||false;
this.blenddelay=(this.ie)?document.images.slide.filters[0].duration*1000 : 0;
this.slidespeed=o.Duration||1000;
this.cnt=0;
}

SlideIt.prototype.Rotate=function(){
if (this.ie){
this.img.filters[0].apply();
}
this.img.src=this.ary[this.cnt][0].src;
if (this.ie){
this.img.filters[0].play()
}
this.lk.href=this.ary[this.cnt][1];
this.cnt=++this.cnt%this.ary.length;
var oop=this;
setTimeout(function(){ oop.Rotate(); },this.slidespeed+this.blenddelay)

}


var S=new SlideIt({
ID:'tst',
ImageArray:["http://www.dynamicdrive.com/dynamicindex4/bs00825a.gif","http://www.dynamicdrive.com/dynamicindex4/hh01478a.gif","http://www.dynamicdrive.com/dynamicindex4/bs00847a.gif"],
LinkArray:["http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com"],
Duration:1000
});

S.Rotate();

S=new SlideIt({
ID:'tst1',
ImageArray:["http://www.dynamicdrive.com/dynamicindex4/bs00825a.gif","http://www.dynamicdrive.com/dynamicindex4/hh01478a.gif","http://www.dynamicdrive.com/dynamicindex4/bs00847a.gif"],
LinkArray:["http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com"],
Duration:2500
});

S.Rotate();

/*]]>*/
</script>
</body>

</html>

Doesn't appear to be working..

But of course, I could be doing something wrong.

jscheuer1
08-20-2010, 01:11 AM
I'd suggest updating to:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

or to:

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

Either of which is more cross browser than and can otherwise be made to look like the script you are currently asking about. In addition to being able to be used multiple times on a page, both of the scripts I've just linked to have other features that you may find useful.

vwphillips
08-20-2010, 09:22 AM
I retested the code I posted with IE and FF and it works for me