Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    102
    Thanks
    0
    Thanked 0 Times in 0 Posts

    need a slideshow

    HI eveyone
    I saw this slideshow on a site that I can't remember now .
    I attached an image .
    Can anyone help me to find a slideshow like this ?

    Thanks
    Attached Thumbnails Attached Thumbnails need a slideshow-5-16-2013-10-21-07-am.jpg  

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    You will find many excellent slideshow scripts at

    http://www.vicsjavascripts.org.uk/


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    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>
    <style type="text/css">
    /*<![CDATA[*/
    
    .sswrapper {
      position:absolute;left:100px;top:100px;width:620px;height:306px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    .slideshow {
      position:absolute;left:20px;top:20px;width:350px;height:260px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    .slider {
      position:absolute;left:400px;top:10px;width:200px;height:286px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    .slide {
      position:absolute;left:10px;top:0px;width:180px;
    }
    
    .item {
      position:repative;float:left;left:0px;top:0px;width:180px;height:80px;border:solid blue 1px;margin-Top:10px;background-Color:#FFCC66;cursor:pointer;
      opacity: .5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    .active {
      opacity:1;filter:alpha(opacity=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
    
    #up {
     position:absolute;z-Index:2;left:500px;top:10px;cursor:pointer;
    }
    
    #down {
     position:absolute;z-Index:2;left:500px;top:285px;cursor:pointer;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <input id="b1" type="button" name="" value="up" />
    <input id="b2" type="button" name="" value="down" />
    <input type="button" name="" value="Goto 0" onmouseup="zxcScroller.GoTo('tst',0);"/>
    <input type="button" name="" value="Goto 1" onmouseup="zxcScroller.GoTo('tst',1);"/>
    <input type="button" name="" value="Goto 2" onmouseup="zxcScroller.GoTo('tst',2);"/>
    <input type="button" name="" value="Goto 3" onmouseup="zxcScroller.GoTo('tst',3);"/>
    
     <div id="w" class="sswrapper" >
      <img id="up" src="http://www.vicsjavascripts.org.uk/StdImages/up[1].gif" alt="next" />
      <img id="down" src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" alt="back" />
      <div id="ss" class="slideshow" >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="350" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" width="350" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" width="350" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" width="350" />
      </div>
    
      <div id="tst" class="slider" >
       <div class="slide" >
        <div class="item" >Item 1</div>
        <div class="item" >Item 2</div>
        <div class="item" >Item 3</div>
        <div class="item" >Item 4</div>
       </div>
      </div>
    
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slider/Fade Slide Show. (16-May-2013)  DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcSlideFade={
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o&&o.ary[nu]&&nu!=o.fst){
       o.goto=nu;
       this.rotate(o,1,false,100);
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id];
      if (o){
       !o.run?this.rotate(o,ud):o.nxt=ud;
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,o.ud,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.SliderID,ss=document.getElementById(o.SlideShowID),m=o.Mode,os=o.SliderOffset,ms=o.Speed,hold=o.AutoHold,srt=o.AutoStart,ud=o.Direction,acls=o.ActiveClass,ae=o.AddEvents,obj=document.getElementById(id),slide=obj?obj.getElementsByTagName('DIV')[0]:null;
      if (obj&&slide&&ss){
       var sss=ss?ss.childNodes:[],m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='H'?['left','offsetWidth','width']:['top','offsetHeight','height'],ms=typeof(ms)=='number'&&ms>20?ms:1000,clds=slide.childNodes,ary=[],e,z0=0,z1=0,z2=0;
       obj.style.overflow='hidden';
       slide.style[m[2]]='30000px';
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         e=clds[z0].className;
         ary.length==0?clds[z0].className=e+' '+acls:null;
         ary.push([clds[z0],[e,e+' '+acls]]);
         this.addevt(clds[z0],'mouseup','GoTo',id,z0);
        }
       }
       this['zxc'+id]=o={
        id:id,
        ary:ary,
        ssary:[],
        slide:[slide,m[0]],
        m:m[1],
        fst:0,
        lst:ary.length-1,
        os:typeof(os)=='number'?os:0,
        ms:ms,
        hold:typeof(hold)=='number'&&hold>0?hold:ms*4,
        ud:typeof(ud)=='number'&&ud<0?-1:1,
        run:false
       }
       if (ae instanceof Array){
        for (;z1<ae.length;z1++){
         obj=document.getElementById(ae[z1][0]);
         e=ae[z1][1];
         if (obj&&this[ae[z1][2]]&&(e=='mouseover'||e=='mouseout'||e=='mouseup'||e=='mousedown'||e=='click')){
          this.addevt(obj,e,ae[z1][2],id,ae[z1][3]);
         }
        }
       }
       for (;z2<sss.length;z2++){
        if (sss[z2].nodeType==1&&ary[o.ssary.length]){
         sss[z2].style.position='absolute';
         sss[z2].style.zIndex=o.ssary.length>0?'0':'1';
         sss[z2].style.left='0px';
         sss[z2].style.top='0px';
         this.opc(sss[z2],o.ssary.length>0?0:100);
         o.ssary.push([sss[z2]]);
        }
       }
       o.lgth=o.ssary.length-1;
       typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,ud,auto,ms){
      clearTimeout(o.to);
      o.nxt=false;
      o.auto=auto===true;
      !ms?o.goto=-1:null;
      var fst=o.ary[o.fst][0],lst=o.ary[o.lst][0];
      o.slide[0].appendChild(lst);
      ud<0?o.slide[0].insertBefore(lst,fst):null;
      o.run=true;
      o.ud=ud;
      o.ary[o.lst][0].className=o.ary[o.lst][1][0];
      o.ary[o.fst][0].className=o.ary[o.fst][1][0];
      this.animate(o,o.slide,ud>0?0:-(lst[o.m]+o.os),ud>0?-(fst[o.m]+o.os):0,new Date(),ms||o.ms,ud);
     },
    
     animate:function(o,a,f,t,srt,mS,ud){
      clearTimeout(a[3]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]?a[0].style[a[1]]=n+'px':this.opc(a[0],n);
      }
      if (ms<mS){
       a[3]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
      }
      else {
       a[1]?a[0].style[a[1]]=t+'px':this.opc(a[0],t);
       if (a[1]){
        if (ud>0){
         o.lst=o.fst;
         o.fst+=1;
         o.fst=o.fst>o.lgth?0:o.fst
        }
        else {
         o.fst=o.lst;
         o.lst+=-1;
         o.lst=o.lst<0?o.lgth:o.lst;
        }
        o.ary[o.fst][0].className=o.ary[o.fst][1][1];
        o.ssary[o.fst][0].style.zIndex='1';
        o.ssary[o.lst][0].style.zIndex='0';
        this.animate(o,o.ssary[o.lst],100,0,new Date(),o.ary[o.goto]&&o.goto!=o.fst?20:o.ms);
        this.animate(o,o.ssary[o.fst],0,100,new Date(),o.ary[o.goto]&&o.goto!=o.fst?20:o.ms);
       }
       else if (t==100){
        o.run=false;
        o.nxt?oop.rotate(o,o.nxt):null;
        o.auto?this.Auto(o.id,o.hold):null;
        o.ary[o.goto]&&o.goto!=o.fst?this.rotate(o,1,false,100):null;
       }
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     }
    
    }
    
    zxcSlideFade.init({
     SlideShowID:'ss',     // the unique ID name of the slide show wrapper DIV.               (string)
     SliderID:'tst',       // the unique ID name of the slider wrapper DIV.                   (string)
     Mode:'V',             //(optional) the slider mode, 'Vertical' or 'Horizontal'.          (string, default = 'Vertical')
     SliderOffset:10,      //(optional) the slider offset.                                    (number, default = 0)
     Speed:1000,           //(optional) the slider/fade speed in milli seconds.               (number, default = 1000)
     AutoHold:2000,        //(optional) the auto rotate 'hold' delay in milli seconds.        (number, default = Speed*4)
     AutoStart:2000,       //(optional) the auto rotate 'start' delay in milli seconds.       (number, default = no auto start)
     Direction:1,          //(optional) the rotate ditection, 1 = anti-clock, -1 = clockwise. (number, default = 1000)
     ActiveClass:'active', //(optional) the class modifier of the active slider item.         (string, default = no class modifier)
     AddEvents:[           //(optional) the event call to add to control the script.          (string, default = in line event calls)
      // field 0 = the unique ID name of the element.
      // field 1 = the event type.
      // field 2 = the script function.
      // field 3 = the parameter to pass to the function.
      ['up','mouseup','Next',1],
      ['down','mouseup','Next',-1],
      ['w','mouseover','Pause'],
      ['w','mouseout','Auto']
     ]
    });
    
    /*]]>*/
    </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/


  •  

    Posting Permissions

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