PDA

View Full Version : Shuffling images effect in a slideshow?



monaya
03-06-2012, 07:03 PM
Which javascript functions can I look into to create this flash effect - The casino rolling/shuffling of the images: http://syms.com/category/men/neckwear/ You'll get an idea after the flash loads.

I've got my photo slideshow fading images in and out. Can anything give me that rolling effect?

vwphillips
03-07-2012, 04:28 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:absolute;left:200px;top:100px;width:200px;height:170px;border:solid red 1px;
}

#tst DIV IMG{
width:200px;height:150px;float:left;
}

/*]]>*/
</style></head>

<body>

<input type="button" name="" value="GoTo 0" onmouseup="R1.GoTo(0);" />
<input type="button" name="" value="GoTo 1" onmouseup="R1.GoTo(1);" />
<input type="button" name="" value="GoTo 2" onmouseup="R1.GoTo(2);" />
<input type="button" name="" value="GoTo 3" onmouseup="R1.GoTo(3);" />
<input type="button" name="" value="GoTo 4" onmouseup="R1.GoTo(4);" />
<input type="button" name="" value="GoTo 5" onmouseup="R1.GoTo(5);" />
<input type="button" name="" value="GoTo 6" onmouseup="R1.GoTo(6);" />
<input type="button" name="" value="GoTo 7" onmouseup="R1.GoTo(7);" />
<div id="tst" >
<div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="img" />
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Roll Carousel (07-March-2012) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


function zxcRollCarousel(o){
var oop=this,obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],clds=slide.childNodes,ms=o.RollDuration,rolls=o.Rolls,bb=o.BounceBy,goto=o.GoTo,ary=[],max,c,z0=0;
obj.style.overflow='hidden';
slide.style.position='absolute';
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ary.push(clds[z0]);
}
}
max=ary[ary.length-1].offsetTop+ary[ary.length-1].offsetHeight;
c=slide.cloneNode(true);
c.style.left='0px';
c.style.top=-max+'px';
slide.appendChild(c);
c=c.cloneNode(true);
c.style.top=max+'px';
slide.appendChild(c);
oop.obj=obj
oop.slide=slide;
oop.ary=ary;
oop.max=max;
oop.goto=-1;
oop.ms=typeof(ms)=='number'?ms:500;
oop.rolls=typeof(rolls)=='number'?rolls:1;
oop.now=(obj.offsetHeight-ary[0].offsetHeight)/2;
slide.style.top=oop.now+'px';
oop.bary=[typeof(bb)=='number'?bb:ary[0].offsetHeight/10,4,oop.ms*4,false];
if (typeof(goto)=='number'){
oop.GoTo(goto);
}
}


zxcRollCarousel.prototype={

GoTo:function(nu){
var oop=this,ary=oop.ary,max=oop.max;
if (oop.ary[nu]&&nu!=oop.goto){
clearTimeout(oop.dly);
oop.goto=nu;
oop.animate('top',oop.now,-max,new Date(),Math.max(this.ms*Math.abs((max-ary[nu].offsetTop)/max),2),1,-oop.ary[nu].offsetTop+(oop.obj.offsetHeight-oop.ary[nu].offsetHeight)/2);
}
},

animate:function(mde,f,t,srt,mS,cnt,end){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
oop.now=now;
oop.slide.style[mde]=now+'px';
if (typeof(cnt)=='number'&&cnt>=oop.rolls&&now<end){
oop.slide.style[mde]=end+'px';
oop.now=end;
oop.bary[3]=false;
return oop.bounce();
}
}
if (ms<mS){
oop.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS,cnt,end); },10);
}
else {
oop.now=t;
oop.slide.style[mde]=t+'px';
if (typeof(cnt)=='number'&&cnt<oop.rolls){
cnt++;
oop.animate('top',0,-oop.max,new Date(),oop.ms,cnt,end);
}
else {
oop.bounce();
}
}
},

bounce:function(){
var oop=this;
if (!oop.bary[3]){
oop.bary[3]=[];
for (var z0=0;z0<oop.bary[1];z0++){
oop.bary[3].push(oop.now+oop.bary[0]*(1-Math.sin((z0*90/oop.bary[1])*Math.PI/180))+.001);
oop.bary[3].push(oop.now+.001);
}
}
if (oop.bary[3][0]){
oop.animate('top',oop.now,oop.bary[3][0],new Date(),oop.bary[2]/(oop.bary[1]*2),'bounce');
this.bary[3].splice(0,1);
}
}


}

R1=new zxcRollCarousel({
ID:'tst', // the unique ID name of the parent Node. (string)
Rolls:2, //(optional) the number of rolls. (number, default = 1)
RollDuration:500, //(optional) the duration in milli secondes. (number, default = 500)
BounceBy:10, //(optional) the bounce distance. (number, default = image size/10)
GoTo:1 //(optional) the image number to go to on initialization. (number, default = no initial goto)
});


/*]]>*/
</script>

</body>

</html>

vwphillips
03-09-2012, 01:47 PM
http://www.vicsjavascripts.org.uk/RollCarousel/RollCarousel.htm

sal_js
03-09-2012, 03:25 PM
great work vwphillips