Results 1 to 4 of 4

Thread: image carousel script?

  1. #1
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default image carousel script?

    I am trying to add an image carousel to my blog. This site has a good example at the top

    http://sousstyle.com/

    does anyone know what jquery and css to incorporate into my site to create a similar effect?

    thank you

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,778
    Thanks
    2
    Thanked 413 Times in 407 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:450px;top:50px;width:400px;height:85px;border:solid red 1px;
    }
    
    #tst IMG {
      width:100px;height:75px;float:left;margin-Left:5px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <input type="button" name="" value="Fwd" onmouseup="S.step(1);"/>
    <input type="button" name="" value="Back" onmouseup="S.step(-1);"/>
     <div id="tst" >
      <div >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
      </div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function StepCarousel(o){
     var oop=this,obj=document.getElementById(o.ID),ms=o.StepDuration,slide=obj.getElementsByTagName('DIV')[0],clds=slide.childNodes,sz,ary=[],clone,z0=0;
     obj.style.overflow='hidden';
     slide.style.position='absolute';
     slide.style.width='3000px';
     for (var z0=0;z0<clds.length;z0++){
      if (clds[z0].nodeType==1){
       ary.push(-clds[z0].offsetLeft+(obj.offsetWidth-clds[z0].offsetWidth)/2);
       sz=clds[z0].offsetLeft+clds[z0].offsetWidth;
      }
     }
     slide.style.width=sz+5+'px';
     clone=slide.cloneNode(true);
     clone.style.top='0px';
     clone.style.left=-sz+'px';
     slide.appendChild(clone);
     clone=clone.cloneNode(true);
     clone.style.left=sz+'px';
     slide.appendChild(clone);
     oop.ary=ary;
     oop.cnt=0;
     oop.obj=slide;
     oop.sz=sz;
     oop.now=ary[oop.cnt];
     oop.ms=typeof~(ms)=='number'?ms:1000
     slide.style.left=oop.now+'px';
    }
    
    StepCarousel.prototype={
    
    
     step:function(ud){
      var oop=this,ary=oop.ary,cnt=oop.cnt+ud;
      if (!ary[cnt]){
       cnt=ud>0?0:ary.length-1;
       oop.now+=oop.sz*(ud>0?1:-1);
      }
      oop.cnt=cnt;
      this.animate('left',oop.now,ary[cnt],new Date(),oop.ms);
    
     },
    
     animate:function(mde,f,t,srt,mS,sc,inc){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       oop.now=Math.max(now,f<0||t<0?now:0);
       oop.obj.style[mde]=oop.now+'px';
      }
      if (ms<mS){
       oop.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS); },10);
      }
      else {
       oop.now=t;
       oop.obj.style[mde]=t+'px';
      }
     }
    
    
    }
    
    
    var S=new StepCarousel({
     ID:'tst',
     StepDuration:500
    });
    
    /*]]>*/
    </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
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thank you, but not exactly the one i am going for. do you know how to get a more similar effect like on http://sousstyle.com/

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,778
    Thanks
    2
    Thanked 413 Times in 407 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:450px;top:50px;width:400px;height:85px;border:solid red 1px;
    }
    
    #tst IMG {
      width:100px;height:75px;float:left;margin-Left:5px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <input type="button" name="" value="Fwd" onmouseup="S.step(1);"/>
    <input type="button" name="" value="Back" onmouseup="S.step(-1);"/>
     <div id="tst" >
      <div >
       <img src="http://sousstyle.com/wp-content/uploads/2012/03/IMG_9650-438x438.jpg" alt="image" />
       <img src="http://sousstyle.com/wp-content/uploads/2012/03/00-438x438.jpg" alt="image" />
       <img src="http://sousstyle.com/wp-content/uploads/2012/03/IMG_6787-438x438.jpg" alt="image" />
       <img src="http://sousstyle.com/wp-content/uploads/2011/10/tiina-438x438.jpg" alt="image" />
       <img src="http://sousstyle.com/wp-content/uploads/2011/11/MG_0250-438x438.jpg" alt="image" />
       <img src="http://sousstyle.com/wp-content/uploads/2011/09/LUCYfolk21800a-438x438.jpg" alt="image" />
      </div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function StepCarousel(o){
     var oop=this,obj=document.getElementById(o.ID),ms=o.StepDuration,slide=obj.getElementsByTagName('DIV')[0],clds=slide.childNodes,sz,ary=[],clone,z0=0;
     obj.style.overflow='hidden';
     slide.style.position='absolute';
     slide.style.width='3000px';
     for (var z0=0;z0<clds.length;z0++){
      if (clds[z0].nodeType==1){
       ary.push(-clds[z0].offsetLeft+(obj.offsetWidth-clds[z0].offsetWidth)/2)+0.1;
       sz=clds[z0].offsetLeft+clds[z0].offsetWidth;
      }
     }
     slide.style.width=sz+5+'px';
     clone=slide.cloneNode(true);
     clone.style.top='0px';
     clone.style.left=-sz+'px';
     slide.appendChild(clone);
     clone=clone.cloneNode(true);
     clone.style.left=sz+'px';
     slide.appendChild(clone);
     oop.ary=ary;
     oop.cnt=0;
     oop.obj=slide;
     oop.sz=sz;
     oop.now=ary[oop.cnt];
     oop.ms=typeof~(ms)=='number'?ms:1000
     slide.style.left=oop.now+'px';
    }
    
    StepCarousel.prototype={
    
    
     step:function(ud){
      var oop=this,ary=oop.ary,cnt=oop.cnt+ud;
      if (!ary[cnt]){
       cnt=ud>0?0:ary.length-1;
    //   oop.now+=oop.sz*(ud>0?1:-1);
      }
      oop.cnt=cnt;
      this.animate('left',oop.now,ary[cnt],new Date(),oop.ms);
    
     },
    
     animate:function(mde,f,t,srt,mS,sc,inc){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       oop.now=Math.max(now,f<0||t<0?now:0);
       oop.obj.style[mde]=oop.now+'px';
      }
      if (ms<mS){
       oop.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS); },10);
      }
      else {
       oop.now=t;
       oop.obj.style[mde]=t+'px';
      }
     }
    
    
    }
    
    
    var S=new StepCarousel({
     ID:'tst',
     StepDuration:500
    });
    
    /*]]>*/
    </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/

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
  •