Results 1 to 3 of 3

Thread: Buttons with Slideshow

  1. #1
    Join Date
    Sep 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Buttons with Slideshow

    1) Script Title: Continuous Reel Slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lslideshow.htm

    3) Describe problem: Is there a way to get HULU types of buttons with this SlideShow?
    http://www.hulu.com/
    An array of buttons is shown in the middle near the bottom of each slide. Then one button
    lights up for the slide being shown. Putting the cursor on a particular button will actuate
    that particular slide. This would be very useful.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,780
    Thanks
    2
    Thanked 414 Times in 408 Posts

    Default

    you are looking for pagination.

    it is difficult to modify the Continuous Reel Slideshow

    example image slider with pagination

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    
    #tst {
      position:absolute;left:100px;top:20px;width:400px;height:300px;border:solid red 1px;background-Color:#FFCC66;
    }
    
    #tst IMG {
      width:200px;height:150px;border-Width:0px;
    }
    
    #paginate {
      position:absolute;left:100px;top:325px;width:400px;height:30px;border:solid red 1px;background-Color:#FFCC66;
    }
    
    
    #paginate .page {
      width:20px;height:20px;border:solid red 1px;background-Color:#FFCC66;float:left;margin-Left:10px;margin-Top:5px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/2.gif);
    }
    
    #paginate .current {
      background-Color:#FF0000;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/3.gif);
    }
    
    #paginate .mouseover {
      background-Color:#99CC66;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/4.gif);
    }
    
    
    #tst2 {
      position:absolute;left:100px;top:400px;width:400px;height:300px;border:solid red 1px;background-Color:#FFCC66;
    }
    
    #tst2 IMG {
      width:400px;height:300px;border-Width:0px;
    }
    
    #paginate2 .page {
      width:20px;height:20px;border:solid red 1px;background-Color:#FFFFCC;margin-Top:10px;margin-Left:5px;
    }
    
    #paginate2 .current {
      background-Color:#FF0000;
    }
    
    #paginate2 .mouseover {
      background-Color:#99CC66;
    }
    
    
    -->
    </style></head>
    
    <body>
     <div id="tst" >
     </div>
    
     <div id="paginate" >
      <div class="page" ></div>
      <div class="page" ></div>
      <div class="page" ></div>
     </div>
    
     <div id="tst2" >
     </div>
    
     <div id="paginate2" >
      <div class="page" ></div>
      <div class="page" ></div>
      <div class="page" ></div>
     </div>
    
    
    <script type="text/javascript">
    <!--
    // Slide Slide Show. (07-September-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    /*
    
     **** Controlling the Script.
      The script may be controlled by inline event calls.
    
      ** Function Next.
       e.g.
        <input type="button" name="" value="Next" onmouseup="zxcFadeSlideShow.Next('i1',1);" >
       where:
        paramter 0 = the unique ID name of the featured image. (string)
        paramter 1 = 1 = display the next image, -1 display the previous image. (number)
    
      ** Function GoTo.
         e.g.
         <input type="button" name="" value="GoTo 1" onmouseup="zxcFadeSlideShow.GoTo('i1',1);" >
       where:
        paramter 0 = the unique ID name of the featured image. (string)
        paramter 1 = index number of the specified image.      (number)
    
      ** Function Auto.
       Function Auto will auto rotate the slide show images.
       e.g.
        <input type="button" name="" value="Auto" onmouseup="zxcFadeSlideShow.Auto('i1');" >
       where:
        paramter 0 = the unique ID name of the featured image. (string)
    
      ** Function Pause.
       e.g.
        <input type="button" name="" value="Pause" onmouseup="zxcFadeSlideShow.Pause('i1');" >
       where:
        paramter 0 = the unique ID name of the featured image. (string)
    
    */
    
    var zxcSlideSlideShow={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o&&o.ary[n]){
       this.rotate(o,n);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ParentID,ia=o.ImageArray,pge=document.getElementById(o.PaginateID),m=o.Mode,ud=o.Direction,ms=o.Animate,add=o.AddEvents,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id),add=add instanceof Array?add:[];
      if (p&&ia instanceof Array){
       p.style.overflow='hidden';
       var  m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='V'?['top','height',p.offsetHeight,'left','width',p.offsetWidth]:['left','width',p.offsetWidth,'top','height',p.offsetHeight],ms=typeof(ms)=='number'&&ms>0?ms:1000,a=document.createElement('A'),i,obj,t,c=0,pgs=pge?pge.childNodes:[],z0=0,z1=0,z2=0;
       o.ary=[];
       for (;z0<ia.length;z0++){
        if (ia[z0]&&ia[z0][0]){
         i=document.createElement('IMG');
         a=document.createElement('A');
         p.appendChild(a);
         i.src=ia[z0][0];
         ia[z0][1]?a.href=ia[z0][1]:null;
         ia[z0][2]?i.title=ia[z0][2]:null;
         a.appendChild(i);
         i.style.position='absolute';
         i.style[m[0]]=(c>0?m[2]:(m[2]-i[m[1]]+.1)/2)+'px';
         i.style[m[3]]=(m[5]-i[m[4]])/2+'px';
         o.ary[c]=[i,m[0],(m[2]-i[m[1]])/2];
         c++;
        }
       }
       o.pgs=[];
       c=0;
       for (;z1<pgs.length;z1++){
        pge=pgs[z1].className;
        if (pge){
         o.pgs[c]=[pgs[z1],pge,pge+' current',pge+' mouseover'];
         this.pge(o,c,c>0?1:2);
         this.addevt(pgs[z1],'mouseup','slide',o,c);
         this.addevt(pgs[z1],'mouseover','mse',o,c,3);
         this.addevt(pgs[z1],'mouseout','mse',o,c,1);
         c++;
        }
       }
       for (;z2<add.length;z2++){
        if (add[z2]&&add[z2][0]){
         obj=document.getElementById(add[z2][0]);
         if (obj&&this[add[z2][2]]){
          t=add[z2][1];
          this.addevt(obj,t=='click'||t=='mouseover'||t=='mouseout'||t=='mousedown'?t:'mouseup',add[z2][2],id,add[z2][3]);
         }
        }
       }
       o.id=id;
       o.m=m;
       o.ud=typeof(ud)=='number'&&ud<0?-1:1;
       o.ms=ms;
       o.s=o.OnAnimate;
       o.f=o.OnComplete;
       o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
       o.n=0;
       this['zxc'+id]=o;
       typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,auto){
      clearTimeout(o.to);
      var m=o.m,n=o.n,a=o.ary[n],lgth=o.ary.length-1;
      this.pge(o,n,1);
      this.animate(o,a,a[2],m[2]*(o.ud>0?-1:1),new Date(),o.ms+20);
      o.auto=auto===true;
      n=o.auto?n+o.ud:auto;
      n=n>lgth?0:n<0?lgth:n;
      typeof(o.s)=='function'?o.s(n):null;
      a=o.ary[n];
      this.pge(o,n,2);
      this.animate(o,a,m[2]*(o.ud>0?1:-1),(m[2]-a[0][m[1]]+.1)/2,new Date(),o.ms,true);
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS,c){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=Math.floor(n);
       a[0].style[a[1]]=a[2]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,c); },10);
      }
      else {
       a[2]=t;
       a[0].style[a[1]]=t+'px';
       typeof(o.f)=='function'?o.f(n):null;
       c&&o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     pge:function(o,n,ud){
      o.pgs[n]?o.pgs[n][0].className=o.pgs[n][ud]:null;
     },
    
     slide:function(o,n){
      n!=o.n?o.ud=n<o.n?-1:1:null;
      this.rotate(o,n);
     },
    
     mse:function(o,n,ud){
      n!=o.n?o.pgs[n][0].className=o.pgs[n][ud]:null;
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null;
     }
    
    
    }
    
    zxcSlideSlideShow.init({
     ParentID:'tst',        // the unique ID name of the parent DIV.                                    (string)
     ImageArray:[           // an array of arrays defining the images.                                  (array)
      // field 0 = the image scr.
      // field 1 = (optional) the image link href.
      // field 2 = (optional) the image title.
      ['http://www.vicsjavascripts.org.uk/StdImages/1.gif','http://www.vicsjavascripts.org.uk/','Egypt 1'],
      ['http://www.vicsjavascripts.org.uk/StdImages/2.gif','http://www.vicsjavascripts.org.uk/','Egypt 2'],
      ['http://www.vicsjavascripts.org.uk/StdImages/3.gif','http://www.vicsjavascripts.org.uk/','Egypt 3']
     ],
     PaginateID:'paginate', //(optional) the unique ID name of the parent DIV.                          (string, default = np psgination)
     Mode:'Horizontal',     //(optional) the mode, 'Horizontal' or 'Vertical'.                          (string, default = 'Horizontal')
     Animate:500,           //(optional) the animation duration in milli sceconds.                      (number, default = 1000)
     Direction:1,           //(optional) the initial auto rotation direction, >0 = forward, < o = back. (number, default = 1 = forward)
     AutoHold:2000,         //(optional) the auto rotation hold delay in milli sceconds.                (number, default = Animation*4)
     AutoStart:1000,        //(optional) the auto rotation start  delay in milli sceconds.              (number, default = no auto start)
     AddEvents:[            //(optional) an array defining the event calls to add.                      (array, default = inline event calls)
      // field 0 = the unique ID name of the element.
      // field 1 = the event type.
      // field 2 = the function name.
      // field 3 = (optional) the parameter to pass to the function.
      ['tst','mouseover','Pause'],
      ['tst','mouseout','Auto']
     ],
     OnAnimate:function(n){  //(optional) a function to call when starting sliding of new image.         (function, default = no function)
      // n =the current imasge index.
     },
     OnComplete:function(n){ //(optional) a function to call when sliding in is complete.                (function, default = no function)
      // n =the current imasge index.
     }
    });
    
    zxcSlideSlideShow.init({
     ParentID:'tst2',
     ImageArray:[
      ['http://www.vicsjavascripts.org.uk/StdImages/1.gif','http://www.vicsjavascripts.org.uk/','Egypt 1'],
      ['http://www.vicsjavascripts.org.uk/StdImages/2.gif','http://www.vicsjavascripts.org.uk/','Egypt 2'],
      ['http://www.vicsjavascripts.org.uk/StdImages/3.gif','http://www.vicsjavascripts.org.uk/','Egypt 3']
     ],
     PaginateID:'paginate2',
     Mode:'Vertical',
     AutoStart:1000,
     AddEvents:[
      ['tst2','mouseover','Pause'],
      ['tst2','mouseout','Auto']
     ]
    });
    
    //-->
    </script>
    
    
    
    </body>
    
    </html>
    the appearance of the pagination can be controlled by the CSS
    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:

    kenrogers (09-09-2013)

  4. #3
    Join Date
    Sep 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I tried it and it works well! Now if I can just integrate it with the
    rest of my web page. Thank you very much!

    Best, Ken

Similar Threads

  1. Navigation Buttons in Fade-In-Slideshow
    By Domenic in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-27-2012, 02:37 AM
  2. Buttons not working in Lightbox Slideshow
    By BreezyTai in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-09-2009, 04:13 PM
  3. Fade-in Slideshow buttons
    By WizHock in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-11-2008, 04:29 PM
  4. DD Swiss Army Slideshow Buttons
    By rohksie in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-10-2008, 11:09 PM
  5. Custom Buttons for Slideshow
    By Bornfree in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-17-2006, 02:54 AM

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
  •