image carousel script? [Archive] - Dynamic Drive Forums

View Full Version : 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

<!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

<!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>