image carousel script?

**jessamca** · 04-04-2012, 04:03 AM

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

**vwphillips** · 04-04-2012, 03:59 PM

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>

**jessamca** · 04-05-2012, 02:10 AM

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/

**vwphillips** · 04-05-2012, 08:55 AM

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>

Thread: image carousel script?

Thread Tools

Search Thread

image carousel script?

Bookmarks

Bookmarks

Posting Permissions