I did not know what made me love the flipping image gallery - where when mouse over, it shows the details of the image (text) by replacing the original image.
I am searching for some javascript version of this behavior.
Here is one sample (flash version):
http://advantagesystemsinteractive.net/descriptions/#/en/flip-card-gallery
Any alternatives?
Preferably jquery version would be good to know and use.
if you are refering to the flip only
<!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[*/
#img {
position:absolute;left:200px;top:100px;width:200px;height:150px;border:solid red 1px;
}
#img IMG{
position:absolute;left:0px;top:0px;width:200px;height:150px;
}
/*]]>*/
</style></head>
<body>
<div id="img" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcFlip(o){
var oop=this,obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),ms=o.FlipDuration;
imgs[0].style.width='0px';
imgs[0].style.left=imgs[1].width/2+'px';
oop.sz=imgs[1].width;
oop.imgs=imgs;
oop.ms=typeof(ms)=='number'?ms/2:500;
imgs[2].onmouseover=function(){ oop.flip(1); }
imgs[2].onmouseout=function(){ oop.flip(0); }
}
zxcFlip.prototype={
flip:function(nu){
var oop=this,imgs=oop.imgs,sz=oop.sz;
var ms=this.ms*Math.abs(imgs[nu].width/sz);
clearTimeout(oop.to1);
clearTimeout(oop.to2);
this.animate('width',imgs,nu,imgs[nu].width,0,new Date(),ms,'to1');
this.animate('left',imgs,nu,imgs[nu].offsetLeft,sz/2,new Date(),ms,'to2',true);
},
animate:function(mde,imgs,nu,f,t,srt,mS,to,ud){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
imgs[nu].style[mde]=Math.max(now,0)+'px';
}
if (ms<mS){
oop[to]=setTimeout(function(){ oop.animate(mde,imgs,nu,f,t,srt,mS,to,ud); },10);
}
else {
imgs[nu].style[mde]=t+'px';
if (ud){
nu=nu==0?1:0;
this.animate('width',imgs,nu,imgs[nu].width,oop.sz,new Date(),mS);
this.animate('left',imgs,nu,imgs[nu].offsetLeft,0,new Date(),mS);
}
}
}
}
new zxcFlip({
ID:'img', // the unique ID name of the parent node. (string)
FlipDuration:200 //(optional) the flip duration in milli seconds. (number, default = 1000)
});
/*]]>*/
</script>
</body>
</html>
Hi Vic,
Thank you for the codes.
Very cool and compact script - I liked it.
I would expect a text based caption/description in the next flip (that comes when mouse over even happens) - which would be different than the image.
When is mouse is moved back the original image appears.
<!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[*/
#img {
position:absolute;overflow:hidden;left:200px;top:100px;width:200px;height:150px;background-Color:#FFFFCC;border:solid red 1px;
}
#img2 {
position:absolute;left:500px;top:100px;width:200px;height:150px;background-Color:#FFFFCC;border:solid red 1px;
}
.card {
position:absolute;left:0px;top:0px;width:200px;height:150px;border-Width:0px;
}
.div{
overflow:hidden;background-Color:red;float:left;text-Align:center;
}
/*]]>*/
</style></head>
<body>
<div id="img" >
<div class="card div" ><div class="card div" >Some Text Some Text Some Text Some Text</div></div>
<img class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" />
</div>
<div id="img2" >
<img class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<div class="card div" ><div class="card div" >Some Text Some Text Some Text Some Text</div></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcFlip(o){
var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','height','offsetTop','offsetHeight']:['left','width','offsetLeft','offsetWidth'],obj=document.getElementById(o.ID),imgs=obj.childNodes,ms=o.FlipDuration,sz=obj[mde[3]],ary=[],z0=0
for (;z0<imgs.length;z0++){
if (imgs[z0].nodeType==1){
ary.push(imgs[z0].nodeName.toUpperCase()!='A'?imgs[z0]:imgs[z0].getElementsByTagName('*')[0]);
}
}
ary[0].style[mde[1]]='0px';
ary[0].style[mde[0]]=sz/2+'px';
oop.mde=mde;
oop.sz=sz;
oop.ary=ary;
oop.ms=typeof(ms)=='number'?ms/2:500;
obj.onmouseover=function(){ oop.flip(1); }
obj.onmouseout=function(){ oop.flip(0); }
}
zxcFlip.prototype={
flip:function(nu){
var oop=this,mde=oop.mde,ary=oop.ary,sz=oop.sz,max=Math.max(ary[0][mde[3]],ary[1][mde[3]]),ms=oop.ms*max/sz;
clearTimeout(oop.to1);
clearTimeout(oop.to2);
oop.to1=setTimeout(function(){
oop.animate(mde[1],ary,nu,ary[nu][mde[3]],0,new Date(),ms,'to1');
oop.animate(mde[0],ary,nu,ary[nu][mde[2]],sz/2,new Date(),ms,'to2',true);
},nu==1?50:200);
},
animate:function(mde,ary,nu,f,t,srt,mS,to,ud){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
ary[nu].style[mde]=Math.max(now,0)+'px';
}
if (ms<mS){
oop[to]=setTimeout(function(){ oop.animate(mde,ary,nu,f,t,srt,mS,to,ud); },10);
}
else {
ary[nu].style[mde]=t+'px';
if (ud){
nu=nu==0?1:0;
mde=oop.mde;
this.animate(mde[1],ary,nu,ary[nu][mde[3]],oop.sz,new Date(),mS);
this.animate(mde[0],ary,nu,ary[nu][mde[2]],0,new Date(),mS);
}
}
}
}
new zxcFlip({
ID:'img', // the unique ID name of the parent node. (string)
Mode:'horizontal', //(optional) mode of execution, 'horizontal' or 'vertical'. (number, default = 'horizontal')
FlipDuration:200 //(optional) the flip duration in milli seconds. (number, default = 1000)
});
new zxcFlip({
ID:'img2',
Mode:'vertical'
});
/*]]>*/
</script>
</body>
</html>