imageflip

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!

More Great Tutorial You Would Like:

Too Much Porn In History? New Way To Automatically Delete History

  • http://www.productivedreams.com Gopal Raju

    Good One buddy!

    Gopal Raju
    productivedreams.com
    @ gopalraju

  • Leo Shastri

    Nice tutorial…

  • http://www.nomadgraphs.com/ math

    great tutorial, thx for sharing

  • Shane Brown

    excellent piece of work.. after searching a lot of sites I finally got it here.. thanks for sharing

  • Juan Martinez

    Nice plugin. would you be able to let me know what to modify so that it automatically and continuously flips as soon as the page loads?

    Thanks.

  • Atul

    You have to add a set interval function to your javasccript or

    Change your javascript to ::.

    $(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’});
    var i=1;
    $.fn.flipImages=function(){
    if(i==1){
    $(“#image1″).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);
    i=2;
    }else{
    $(“#image2″).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);
    i=1;
    }
    };
    setInterval(‘$(“#container”).flipImages()’, 2000);//change the time interval acc. to your needs
    });

  • http://www.tutoriallounge.com tutorialslounge

    i really like your tutorial which is still helping. thanks

  • Pingback: Image Flip Using jQuery | WebMuch « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit

  • http://www.gigglecomputer.com Phaoloo

    Nice tutorial, I love the effect.

  • Pingback: CSS Brigit | Image Flip Using jQuery

  • Pingback: Best Collection of jQuery Tutorials, Gift for Designers & Developers. | guidesigner.net

  • Pingback: Best Collection of jQuery Tutorials, Gift for Designers & Developers. | Web Design GroundBreak

  • Pingback: Noteefy - Be aware » Best Jquery Lessons Of The Month

  • Pingback: I migliori plugin di jQuery in circolazione sono qui | Italian webdesign

  • 呵呵

    I do it like this ,but it does not work

    How to?
    thank for help!非常感谢!

  • 呵呵

    I do it like this ,but it does not work

    /div id=”image1″/ /img src=”images/image1.jpg” / /div/

    /div id=”image2″/ /img src=”images/image2.jpg” ///div/

    How to do in /div/?
    thank for help!非常感谢!

  • Atul

    In your javacript try using $(‘#image1 img’) instead of $(‘#image1′)…..

  • Pingback: Image Flip Using jQuery | AJAX Collection & Research

  • Sachin Kothari

    I am a newbie with Jquery and i would like to know if i could implement it with mouse evens. I would like the image to change on mouse over it and when the mouse is removed, it should go back to its orignal image.
    Thanks in advance

  • Atul

    place both the images in a division…..

    <img id=”image1″…..
    <img id=”image2″…..

    now, use the hover function for flip div in your javascript…
    $(“#flip”).hover(
    function(){
    $(“#image1″).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);
    },function(){
    $(“#image2″).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);

    This should work!!!
    }
    );

  • yo

    Hi,
    very nice effect & tutorial !
    But couldn’t find the php for reflection in sources file

  • http://www.webmuch.com Aayush

    That’s because the article was intended towards the flip and not the reflection.

    Here is a good article for image reflection using PHP: http://bit.ly/bvyGW

  • Pingback: Create An Image Flip Using jQuery | jQuery Wisdom

  • David

    Strange! My _whole_ screen (everything from the menu bar to the dock) is slightly fading to black (maybe 5%) for a second, when the image flips around. How is this done?!? Didn’t know this was possible at all! Cool, though, but I rather think this a bug of my graphics card, right? I’m using the current Mac mini running MacOS 10.6.1 and it only happens using Safari & Opera, not in Firefox.
    Hmm.. Bug or Feature? :)

    btw: The image flip effect is really great stuff! Thanks for sharing!

  • http://www.webmuch.com Aayush

    I think that could be because of the loading probably. I’m sure I didn’t write any code for doing that. I’m not sure I how to either.

    So, I think it’s probably a bug…

  • SparklyArt

    This is exactly what I have been looking for – THANK YOU Atul!
    I read your answer to another jQuery newbie who also wanted to have the image flip with a mouse event. I too would like that (flip it with a mouseover)… I copied the code you added to the reply, but am not sure where it goes… I tried various ways (with Dreamweaver), but keep getting an error… Do I add this code to your existing one? If so, please enlighten me.
    !!!!! Huge pre-thanks for any help.

  • Atul

    Sparkly, just replace the javscript code with the hover script as I’ve mentioned in the comment above.. if you are still having problems you can post a link to your page… I will look into it

  • http://www.webmuch.com Aayush

    You have to change the HTML for that. Place the images in a div with id=”flip” and then use Atul’s code in that reply…

    Basically you will then be flipping the division which contains the images instead of the images.

    So that is the whole jQuery code. you don’t need to add it to the previous one.

  • SparklyArt

    Thank you for the quick reply/replies. I opened the hflip.js in dreamweaver and replaced the code with the one you gave above… but Dreamweaver says there is a syntax error on line one… what am I doing wrong? How frustrating…
    I pasted this (including you comment “this should work” because there were more brackets after it):

    $(”#flip”).hover(
    function(){
    $(”#image1″).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);
    },function(){
    $(”#image2″).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);
    This should work!!!
    }
    );

    Thanks again!

  • Atul

    I don’t see any problem in your code…A few suggestions…
    When you copy the code directly from the comment replace all the double quotes and single quotes manually, because when you add quotes(single or double) in the comment box wordpress replaces it with some other kind of symbol…
    One more thing, I hope you are including the jquery source file..

  • SparklyArt

    Thanks Atul.
    Yes, I am including the jquery source. I will try changing the quotes as you suggested… but I better return to this problem later… I am still discovering how to use the code as it is.
    A simple example here:
    http://www.moowow.com/ImgFlip/LFTCP2.htm
    It is really really lovely of you to give time to people who can’t make head or tales of jQuery yet.

  • Neo

    I want to use this as my menu (home, gallery, contact, about)
    In the js file you use ID (#image1 for examaple) how can I reuse the code for other like for Home, Gallery, Contact) should I copy and paste and just change the #home to like #contact ?

  • Neo

    I think I figured it out but one thing i want to ask: how can I make the menu (which is now the flip 2 images) as a link? like when i click contact, it links to contact.htm page. I tried put the tag but after the flip done, there is a blue line cross on the first image and it wont go away.

  • http://www.webmuch.com Aayush

    just remove borders from that anchor using CSS.

  • http://www.gralmy.com greg

    is there a way to link to each of the images separately? I want a total of 5 images, which is no prob, but they go in order when clicked on. can I put buttons under the image gallery that link to each image and have it flip to that image?

  • http://www.gralmy.com greg

    here’s the page I’m working on… http://www.gralmy.com/enyo/flip.html

    I want to overlay the links to the separate pages on top of image1 and have it go to that page…click through it and you’ll see what I mean. and I want a “back” button on each of the images that will link to the first image map!

    Thanks in advance!

  • Atul

    Yes! Greg I can help with what you want in your first comment but I am having a hard time understanding your second comment…. I’ll post a code in the comments soon to help you with the putting buttons under the image gallery to go to a particular image…
    Acc. to the first comment, you want a small set of 5 buttons that link to separate images and onclick of each of the button you want to flip the current image to the image related to that particular button… right…

  • yobdab

    Hi, i have this problem: when use a .png with transparent background everything is ok but in IE there appears some ugly pixels around image.
    Do you have any idea how to repair that ?

  • http://www.webmuch.com Aayush

    that’s not IE but IE6 you’re having a problem with.

    this may help: http://dillerdesign.com/experiment/DD_belatedPNG/

  • yobdab

    no no, i am using ie7. I know that in ie6 there is need of extra script for using transparency in png. but ie7 have no trouble with that. (sorry for my english :) )

  • yobdab

    ah, and more over, until i click on image to flip it displays ok with transparency.

  • yobdab

    ok, i found out that when i click on image in IE it makes it little smaller in width and probably thah’s why it becomes ugly… but why it changes width? i even put in hflip.js exact size (400px) and still the same… :/ i was so happy because i was looking pretty long for this kind of effect…

  • http://www.gralmy.com greg

    yup, Atul, I would rather have an area of the image link to the respective other image, but buttons at the bottom would be fine. I think we can even make it auto rotate and it’ll flip back to the image I want when the button is clicked.

    I appreciate the time and effort put into this! You need a Paypal donate button!

  • Atul

    I don’t like to code for other people but what the hell!!!I hope this is what you wanted http://tinyurl.com/yh8tnus (take the code from the source & try to understand)

  • Atul

    @yobdab I know exactly what you are talking about( ugly black pixels in IE7 when animating to 0 Opacity or using transparent images)…The only way to remove those is to use a background color for the image div which matches your background color and if you are using a pattern as your background you can do nothing about it as far as i know…

  • http://www.gralmy.com greg

    Although I appreciate the effort, I can’t get that to work!

    So, now I’m trying to make it auto rotate on page load. I copied the code above and changed all the apostrophes and quote marks…still doesn’t work. Do you have a working example of the js?

    Thanks again!

  • yobdab

    ah.. thnx i’ll be trying something to make it work.

  • yobdab

    oh yeah! if i knew in first place that this is because the opacity… i just set two different js files, for IE i am loading one without changing opacity.. Thank you!

  • Atul

    @greg the link I sent you to the test page is now not working properly because you changed the css file at your server…I was referencing your stylesheet from the page and I’m guessing you changed something in it which messed up the css & the positioning of those invisible button which had id’s – product_l, support, contact, news….

  • Ruby_for_asp.net

    i have one image which i like to rotate can any one help in java script for that it is image file

  • manny

    it is possible to auto flip?

  • Pingback: Weneck.com » Prototype image flip