Results 1 to 5 of 5

Thread: Blending Image Slideshow Script Multiple Slideshows

  1. #1
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Blending Image Slideshow Script Multiple Slideshows

    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?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    I retested the code I posted with IE and FF and it works for me
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •