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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Interactive slideshow?

    Hi everyone,

    I'm pretty new to JS and I was wondering if anyone could put me on the right track to developing a slideshow which you can flip between the images manually or let it run through itself (and preferably contain links to other pages).

    Basically, like the one at the top of the Valve website:
    http://www.valvesoftware.com/index.html

    Thanks all

  • #2
    New Coder
    Join Date
    Jul 2011
    Location
    Chennai, India
    Posts
    23
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Hi,

    Have a look at this link http://vandelaydesign.com/blog/web-d...age-galleries/. These are based on JQuery and it's very easy to learn and understand.

    If you face any problems while implementation, let me know

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 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[*/
    
    #tst {
      position:relative;width:1200px;height:480px;border:solid red 1px;
    }
    
    #paginate {
      position:absolute;z-Index:4;left:800px;top:400px;height:20px;
    }
    
    #paginate .default {
      position:relative;width:20px;height:20px;float:left;margin-Left:20px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    #paginate .active {
      background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style><script type="text/javascript">
    // Animate (24-June-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // The functional code size is 1.39K
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 2 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
      d=Math.max(d,s<0||f<0?d:0);
      this.data[0]=d;
      this.apply();
      if (ms<this.mS){
       this.to=setTimeout(function(){oop.cng(); },10);
      }
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
       else zxcOpacity(this.obj,this.data[0]);
      }
     }
    
    }
    
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    </script>
    
    </head>
    
    <body>
    
     <div id="tst" onmouseover="S.Pause();"  onmouseout="S.Auto();">
      <img src="http://www.valvesoftware.com/images/slide_ps3.jpg" alt="img" />
      <img src="http://www.valvesoftware.com/images/slide_p2.jpg" alt="img" />
      <img src="http://www.valvesoftware.com/images/slide_l4d2.jpg" alt="img" />
      <img src="http://www.valvesoftware.com/images/slide_ep2.jpg" alt="img" />
      <img src="http://www.valvesoftware.com/images/slide_tf2.jpg" alt="img" />
      <img src="http://www.valvesoftware.com/images/slide_css.jpg" alt="img" />
      <div id="paginate" ></div>
     </div>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function zxcFadeSlideShow(o){
     var obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),z0=0,ary=[],ms=o.FadeDuration,hold=o.Hold,srt=o.AutoStart,pag=document.getElementById(o.PaginateID),pary=[],z1=0;
     for (;z0<imgs.length;z0++){
      imgs[z0].style.position='absolute';
      imgs[z0].style.zIndex=z0>0?'0':'2';
      imgs[z0].style.left='0px';
      imgs[z0].style.top='0px';
      zxcOpacity(imgs[z0],z0>0?0:100);
      ary[z0]=new zxcAnimate('opacity',imgs[z0],z0>0?0:100);
     }
     if (pag){
      this.cls=['default','default active'];
      for (;z1<ary.length;z1++){
       pary[z1]=document.createElement('DIV');
       pary[z1].className=this.cls[z1>0?0:1];
       pag.appendChild(pary[z1]);
       this.addevt(pary[z1],'mouseup','page',z1);
      }
     }
     this.ary=ary;
     this.pary=pary;
     this.lstp=pary[0];
     this.ms=typeof(ms)=='number'?ms:1000;
     this.hold=(typeof(hold)=='number'?hold:1000)+this.ms;
     this.srt=typeof(srt)=='number'?srt+this.ms:false;
     this.to=null;
     this.cnt=0;
     this.lst=ary[this.cnt];
     this.Auto(this.hold);
    }
    
    zxcFadeSlideShow.prototype={
    
     Next:function(cnt,goto){
      this.Pause();
      if (this.lstp){
       this.lstp.className=this.cls[0];
      }
      this.lst.obj.style.zIndex='0';
      this.lst.animate(this.lst.data[0],0,this.ms,[0,100]);
      this.lst=this.ary[cnt];
      this.lst.obj.style.zIndex='2';
      this.lst.animate(this.lst.data[0],100,this.ms,[0,100]);
      if (this.pary[cnt]){
       this.lstp=this.pary[cnt];
       this.lstp.className=this.cls[1];
      }
      this.cnt=cnt;
      if (goto&&this.srt){
       var oop=this;
       this.to=setTimeout(function(){ oop.auto(); },this.srt);
    
      }
     },
    
     page:function(nu){
      this.Next(nu,true);
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
     },
    
     Auto:function(ms){
      var oop=this;
      this.to=setTimeout(function(){ oop.auto(); },ms||500);
     },
    
     Pause:function(){
      clearTimeout(this.to);
     },
    
     auto:function(){
      this.Pause();
      var oop=this,cnt=this.cnt;
      cnt=++cnt%this.ary.length;
      this.to=setTimeout(function(){ oop.Next(cnt); oop.auto(); },this.hold);
     }
    
    
    }
    
    S=new zxcFadeSlideShow({
     ID:'tst',              //(optional) unique ID name of the paent DIV.                   (string )
     PaginateID:'paginate', //(optional) unique ID name of the paginate DIV.                (string, default = no pagination)
     FadeDuration:1000,     //(optional) the fade duration in milli seconds.                (number, default = 1000)
     Hold:1000,             //(optional) the 'hold' between auto rotation in milli seconds. (number, default = 1000)
     AutoStart:2000         //(optional) auto start after goto.                             (number, default = no auto start)
    });
    
    x=new zxcAnimate('opacity',document.getElementById('tst'))
    //x.animate(0,100,1000)
    /*]]>*/
    </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/

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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>
    <style type="text/css">
    ...
    Vic, you are my new hero of the day!!!! Thank you :-)

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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-transitio...
    Hey again, quick question regarding this code. It works great standalone, as is. But I've tried implementing this into a page and it doesn't work, it simply loads all the images one under the last. Is there something in particular I need to know if I want to place this in a table?

    Thanks


  •  

    Posting Permissions

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