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

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

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>
</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/dynamici...nslideshow.htm

or to:

http://www.dynamicdrive.com/dynamici...army/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

Thread: Blending Image Slideshow Script Multiple Slideshows

Thread Tools

Search Thread

Blending Image Slideshow Script Multiple Slideshows

Bookmarks

Bookmarks

Posting Permissions