Results 1 to 4 of 4

Thread: Image slider like this one ?

  1. #1
    Join Date
    Jul 2010
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Image slider like this one ?

    I've had a look through the different image sliders on dynamic drive and can't quite find what i'm looking for.

    Specifcially this is what I'm after
    http://www.logitech.com/en-us/smartT...w&strf=partner

    It has static controls along the base of the image window that allows the user to get to the appropriate section

    Does anyone know where I could get such a thing ? I don't want FLASH as it needs to work on iOS devices.

    Many thanks in advance

  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>
    <style type="text/css">
    /*<![CDATA[*/
    
    #tst {
      position:relative;left:100px;top:100px;width:800px;height:360px;border:solid red 1px;
    }
    
    .frames {
      position:absolute;left:0px;top:0px;width:600px;height:360px;
    }
    .frame {
      width:600px;height:360px;
    }
    
    .tabs {
      position:relative;z-Index:4;left:598px;top:0px;width:200px;
    }
    
    .tab {
      position:relative;left:0px;top:0px;width:200px;height:82px;background-Color:#FFFFCC;border:solid red 1px;margin-Top:5px;
    }
    
    .tabactive {
     left:-5px;background-Color:#FFCC66;
    }
    
    
    /*]]>*/
    </style>
    <script language="JavaScript" src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript">
    // featured on http://www.vicsjavascripts.org.uk/Animate/Animate.htm
    </script>
    </head>
    
    <body>
     <div id="tst" >
    
      <div class="frames" >
    
       <div class="frame" >
        <img src="http://www.myeloma.org.uk/files/7712/8627/0482/maureen%20lipman%20colour%20-%20small%20half.png" />
       </div>
    
       <div class="frame" >
        <img src="http://www.myeloma.org.uk/files/8912/8627/0685/family.png" />
       </div>
    
       <div class="frame" >
        <img src="http://www.myeloma.org.uk/files/9112/8575/1934/supportGroup%20hero.png" />
       </div>
    
       <div class="frame" >
        <img src="http://www.myeloma.org.uk/files/2112/9665/8721/homeHeroFundraising.png" />
       </div>
    
      </div>
    
      <div class="tabs" >
    
       <div class="tab" >
       </div>
    
       <div class="tab" >
       </div>
    
       <div class="tab" >
       </div>
    
       <div class="tab" >
       </div>
    
      </div>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Tab Slide Show (14-Febuary-2011)  DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // ****** Functional Code(4.06K) - NO NEED to Change.
    
    function zxcTabSlideShow(o){
     var oop=this,obj=document.getElementById(o.ID),frames=this.bycls(o.FrameClassName,obj),fn=frames.length,cls=o.TabsClassName,tabs=this.bycls(cls,obj),z0=0,active=typeof(o.ActiveClassName)=='string'?o.ActiveClassName:'',auto=o.AutoRotateHold,atab=typeof(o.AnimateTabs)=='object'&&o.AnimateTabs.constructor==Array?o.AnimateTabs:false,lft,tmde,nu=typeof(o.StartPanel)=='number'&&o.StartPanel<fn?o.StartPanel:0,days=typeof(o.DaysPersistence)=='number'?o.DaysPersistence:false,m=typeof(o.Mode)=='string'?o.Mode.charAt(0).toUpperCase():'O',fmde=m=='O'?'opacity':m=='L'||m=='R'?'left':'top',mm=[0,m=='O'?100:frames[0]['offset'+(m=='L'||m=='R'?'Width':'Height')]*(m=='L'||m=='T'?1:-1),m=='O'?100:0];
     if (days&&this.cookie){
      this.nme=o.ID+'=';
      nu=this.cookie(this.nme)||nu;
     }
     if (m!='O'){
      frames[0].parentNode.style.overflow='hidden';
     }
     this.ary=[];
     for (var z0=0;z0<fn;z0++){
      frames[z0].style.position='absolute';
      frames[z0].style.top='0px';
      frames[z0].style.zIndex=z0!=nu?'0':'2';
      this.ary[z0]=[new zxcAnimate(fmde,frames[z0],z0!=nu?0:100),false,false];
      if (m=='O'){
       zxcOpacity(frames[z0],z0!=nu?0:100);
      }
      else {
       frames[z0].style[fmde]=(z0!=nu?-mm[1]:0)+'px';
       this.ary[z0][0].data[0]=(z0!=nu?-mm[1]:0);
      }
      if (tabs[z0]){
       this.ary[z0][1]=[tabs[z0],cls,cls+' '+active];
       if (atab&&typeof(atab[0])=='number'){
        tmde=typeof(atab[2])=='string'&&atab[2].charAt(0).toLowerCase()=='t'?'top':'left';
        lft=tabs[z0]['offset'+(tmde=='left'?'Left':'Top')];
        this.ary[z0][2]=[atab?new zxcAnimate(tmde,tabs[z0],z0!=nu?lft:lft+atab):false,lft,lft+atab[0]];
        tabs[z0].style[tmde]=lft+(z0!=nu?0:atab[0])+'px';
       }
       tabs[z0].className=this.ary[z0][1][z0!=nu?1:2];
       this.addevt(tabs[z0],'mouseup','GoTo',z0);
      }
     }
     this.days=days;
     this.mde=fmde;
     this.lst=false;
     this.mm=mm;
     this.cnt=nu;
     this.to=null;
     this.ms=typeof(o.AnimationSpeed)=='number'?o.AnimationSpeed:1000;
     if (atab){
      this.sms=typeof(atab[1])=='number'?atab[1]:this.ms/4;
     }
     if (typeof(auto)=='number'){
      this.hold=auto+this.ms;
      this.addevt(obj,'mouseover','Pause');
      this.addevt(obj,'mouseout','Auto',true);
      this.to=setTimeout(function(){ oop.Auto(); },this.hold);
     }
    }
    
    zxcTabSlideShow.prototype={
    
     GoTo:function(nu){
      this.Pause();
      var ary=this.ary[this.cnt],z0=0;
      if (this.mde=='opacity'){
       ary[0].animate(ary[0].data[0],0,this.ms,this.mm);
      }
      else if (this.lst){
       this.lst[0].obj.style.zIndex='0';
       this.lst[0].data[0]=-this.mm[1];
      }
      this.lst=ary
      ary[0].obj.style.zIndex='1';
      if (ary[1]){
       ary[1][0].className=ary[1][1];
      }
      if (ary[2]){
       ary[2][0].animate(ary[2][0].data[0],ary[2][1],this.sms);
      }
      this.cnt=nu;
      ary=this.ary[this.cnt];
      ary[0].animate(ary[0].data[0],this.mm[2],this.ms,this.mm);
      ary[0].obj.style.zIndex='2';
      if (ary[1]){
       ary[1][0].className=ary[1][2];
      }
      if (ary[2]){
       ary[2][0].animate(ary[2][0].data[0],ary[2][2],this.sms);
      }
      if (this.days&&this.cookie){
       document.cookie=this.nme+nu+';expires='+(new Date(new Date().getTime()+this.days*86400000).toGMTString())+';path=/';
      }
     },
    
     Auto:function(srt){
      var oop=this;
      this.to=setTimeout(function(){ oop.auto(); },srt?this.hold:200);
     },
    
     Pause:function(){
      clearTimeout(this.to);
     },
    
     auto:function(){
      var oop=this;nu=this.cnt;
      nu=++nu%this.ary.length;
      this.GoTo(nu);
      this.to=setTimeout(function(){ oop.Auto(); },this.hold);
     },
    
     bycls:function(nme,el,tag){
      for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)) ary.push(els[z0]);
      }
      return ary;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     },
    
      cookie:function(nme){
      var re=new RegExp(nme+'[^;]+','i');
      if (document.cookie.match(re)){
       return document.cookie.match(re)[0].split("=")[1];
      }
      return null
     }
    
    }
    
    
    
    new zxcTabSlideShow({
      ID:'tst',                    // the unique ID name of the Tab Slide Show parent node.               (string)
      FrameClassName:'frame',      // the common class name of the Tab Slide Show frames.                 (string)
      TabsClassName:'tab',         // the common class name of the Tab Slide Show tabs.                   (string)
      Mode:'opacity',           //(optional) the type of execution(see Note 1).                           (string, default = 'opacity')
      ActiveClassName:'tabactive', //(optional) the 'active' class name to be applied to the current tab. (string, default = no 'active' class name)
      StartPanel:1,                //(optional) the initial Tab Slide Show frame index number.            (number, default = 0)
      AnimationSpeed:1000,         //(optional) the duration of the fade effect in milli seconds.         (number, default = 1000)
      AnimateTabs:[-5,100,'left'], //(optional) an array defining the tab animation options.              (array, default = no tab animation)
                                   // field 0 = the animation distance in 'px'.                  (number)
                                   // field 1 = (optional)the animation speed in milli seconds'. (number, default = AnimationSpeed/4)
                                   // field 2 = (optional)the animation type, 'left' or 'top',   (string, default = 'left')
      AutoRotateHold:2000,         //(optional) the auto rotation 'hold'delay in milli seconds.           (number, default = no auto rotation)
      DaysPersistence:1            //(optional) the days persistance to restore the last active frame.    (number, default = no persistence)
    });
    
    // ** Note 1:
    //  There are five modes of execution:
    //   The default 'opacity and
    //   slide in 'left', 'right', 'top' or 'bottom'.
    /*]]>*/
    </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
    Jul 2010
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    vwphilips, thank you soo much

    Going to have a look through the code and see if I can get those buttons underneath those images

  4. #4
    Join Date
    Feb 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Full Screen Image Slideshow

    Could someone let me know why this slideshow ain't working!!

    Here is the link to the source code and files

    http://www.javascriptkit.com/script/...ow/index.shtml

    This is kinda urgent. I need to get a clients website up n running.

    Any good samaritan out there.

    kind regards,

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
  •