Image Flip Using jQuery

Alright, first of all this is not a real image flip but sort of an illusion, the image does not flip itself in 3D since jQuery does not provide us with an image rotation or a distort feature for HTML elements. I know their are some image rotation plug-ins out their but they don’t work out very well with animate method of jQuery.

View Demo 1 View Demo 2 Download Source Code

Preview:

Note: Image flip with reflection is for demo purposes only, it’s done using the PHP GD Library and it’s source files are also included in the source code, so meddle with them if you like.

HTML Code:

<div id="container">
<h1>Image Flip Illusion Using jQuery</h1>
<img id="image1" src="images/image1.jpg" alt="" />
<img id="image2" src="images/image2.jpg" alt="" /></div>
<pre>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script><script type="text/javascript" src="hflip.js"></script>

CSS Code:

body{
background-color:#000;
}
h1{
color:#FFFFFF;
font-family:Arial;
font-size:24px;
font-weight:bold;
}
#container{
width:400px;
margin:0px auto;
height:380px;
margin-top:50px}
#image1{
position:absolute;
cursor:pointer;
width:300px;
height:190px;
}
#image2{
display:none;
position:absolute;
cursor:pointer;
}

As you can see in the above code, I’ve placed the two images in a division and given them absolute positioning to assign their positions in the division.

To achieve the Horizontal flip we are basically reducing the width of the first image to 0 pixels, increasing the left side margin from zero to half it’s width and as soon as we finish that, Increase the width of the second image from zero to it’s actual width and do the opposite for left side margin what we did for the first image i.e reduce it from half the width of the image to zero.

This process takes place when you click on the first image (#image1) and the same process also takes place when you click on second image (#image2) except for the obvious shuffle in their ids.

Just look at the jQuery code below and you will have a better idea of what’s happening:

jQuery:

$(document).ready(function(){
var margin =$("#image1").width()/2;
var width=$("#image1").width();
var height=$("#image1").height();
$("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#reflection2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px'});
$("#image1").click(function(){
$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
window.setTimeout(function() {
$("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
},500);
});
$("#image2").click(function(){
$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
window.setTimeout(function() {
$("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
},500);
});

});

If you want to perform a Vertical flip the jQuery code for that too is included in the source code.

Feel free to leave comments if you appreciate the tutorial or if you have any queries. You can also criticize the work but don’t be rude.

Thanks for Reading!