Results 1 to 5 of 5

Thread: DHTML Slide Show Script

  1. #1
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default DHTML Slide Show Script

    1) Script Title: DHTML Slide Show Script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 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>
    <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>
    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. The Following User Says Thank You to vwphillips For This Useful Post:

    jbriceno28 (04-09-2013)

  4. #3
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post

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

  5. #4
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.
    Thanks,

    Bud

  6. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

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

Similar Threads

  1. DHTML Slide Show Script
    By gajlehab in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-10-2013, 12:49 AM
  2. DHTML slide show script
    By gener in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-27-2012, 12:31 PM
  3. DHTML Slide Show Script
    By msahmed in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 12-02-2007, 05:46 AM
  4. DHTML Slide Show Script
    By coralshrimp in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-23-2005, 04:43 PM
  5. DHTML Slide Show Script
    By JMason in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-09-2004, 01:20 PM

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
  •