In this week’s post we will be creating an illusion effect of an image flip using jQuery of course. This thing can be used as a cool gallery kind of a thing. So, hopefully you guys will like it, let’s get to it.
Date: June 17, 2009
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.
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.
RSS
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Flip Illusion Using jQuery</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<div id="container">
<h1>Image Flip Illusion Using jQuery</h1>
<img id="image1" src="images/image1.jpg" />
<img id="image2" src="images/image2.jpg" />
</div>
<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>
</body>
</html>
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:
$(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.
You can always find some good tutorials and articles on the Resources page. You can always reach it using the menu up-top.
Thanks for Reading!
Comments currently closed.
When hundreds of web sites are designed up every other day, your website need to have something special to attract your potential customers.
Design magazines have always been a great source of inspiration for designers. It brings latest trends and new ideas into the mind of designers.
JavaScript has blossomed so rightly. Since then, there are jquery, Mootools , Scriptallicious, Prototype etc..which really produces cool effects. In todays time, java script is a must have component.
Invoicera has recently unveiled the release of their new fully blown web application with tons of powerful features to further simplify the management of bills and invoices. The new version is a complete makeover and you may probably even fail to recognize it.
After literally years of speculation, Apple’s tablet is here and it’s called the iPad. iPad runs almost 140,000 apps from the App Store. It’s also a useful tool for designers, illustrators and digital artists looking to get creative on the move.
Again it’s time for photoshop tutorials. The tutorials are good as an inspiration for creative ideas. You have to learn how to combine photos and add special effects to turn a normal photograph into a stunning artwork.
Choosing a CMS for your project depends upon the requirement and complexity of the project.
The iPhone is more than just a phone. It combines three devices in one: a revolutionary phone, a wide screen iPod and a groundbreaking Internet device.
CSS definitely provides you the ease of changing the appearance of your entire website by just modifying a single file. What makes the entire process of changing the CSS files more easy is the use of CSS Editors.BestDesignTuts.com has brought to you 14 such CSS Editors which will cut half of the work load of every designer.
404! Error Pages once used to be seen as the most unwanted page that any visitor would like to see, and therefore the designers did not give the required piece of attention to it.
Comments:
Gopal Raju
June 17, 2009
Good One buddy!
Gopal Raju
productivedreams.com
@ gopalraju
Leo Shastri
June 17, 2009
Nice tutorial…
math
June 17, 2009
great tutorial, thx for sharing
Shane Brown
June 19, 2009
excellent piece of work.. after searching a lot of sites I finally got it here.. thanks for sharing
Juan Martinez
July 16, 2009
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
July 16, 2009
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
});
tutorialslounge
July 21, 2009
i really like your tutorial which is still helping. thanks
Image Flip Using jQuery | WebMuch « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit
August 3, 2009
[...] Image Flip Using jQuery | WebMuchwebmuch.com [...]
Phaoloo
August 3, 2009
Nice tutorial, I love the effect.
CSS Brigit | Image Flip Using jQuery
August 4, 2009
Image Flip Using jQuery…
Tutorial on creating an illusion effect of an image flip using jQuery of course. This thing can be used as a cool gallery kind of a thing.
…
Best Collection of jQuery Tutorials, Gift for Designers & Developers. | guidesigner.net
August 13, 2009
[...] Image Flip Using jQuery [...]
Best Collection of jQuery Tutorials, Gift for Designers & Developers. | Web Design GroundBreak
August 16, 2009
[...] Image Flip Using jQuery [...]
Noteefy - Be aware » Best Jquery Lessons Of The Month
August 19, 2009
[...] Image Flip Using jQuery [...]
I migliori plugin di jQuery in circolazione sono qui | Italian webdesign
August 24, 2009
[...] FancyPlayer – jQuery Fancybox and Flowplayer Integration Tutorial Image Flip Using jQuery [...]
呵呵
August 27, 2009
I do it like this ,but it does not work
How to?
thank for help!非常感谢！
呵呵
August 27, 2009
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
August 27, 2009
In your javacript try using $(’#image1 img’) instead of $(’#image1′)…..
Image Flip Using jQuery | AJAX Collection & Research
August 30, 2009
[...] check it out [...]
Sachin Kothari
September 2, 2009
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
September 2, 2009
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
September 13, 2009
Hi,
very nice effect & tutorial !
But couldn’t find the php for reflection in sources file
Aayush
September 13, 2009
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
Create An Image Flip Using jQuery | jQuery Wisdom
September 13, 2009
[...] side margin what we did for the first image i.e reduce it from half the width of the image to zero. Web Site Demo Download AKPC_IDS += "89,";Popularity: unranked [?] Share and [...]
David
September 26, 2009
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!
Aayush
September 27, 2009
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
September 30, 2009
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
September 30, 2009
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
Aayush
September 30, 2009
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
September 30, 2009
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
September 30, 2009
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
October 1, 2009
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
October 5, 2009
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
October 5, 2009
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.
Aayush
October 5, 2009
just remove borders from that anchor using CSS.
greg
October 12, 2009
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?
greg
October 12, 2009
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
October 12, 2009
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
October 12, 2009
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 ?
Aayush
October 12, 2009
that’s not IE but IE6 you’re having a problem with.
this may help: http://dillerdesign.com/experiment/DD_belatedPNG/
yobdab
October 12, 2009
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
October 12, 2009
ah, and more over, until i click on image to flip it displays ok with transparency.
yobdab
October 12, 2009
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…
greg
October 13, 2009
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
October 13, 2009
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
October 13, 2009
@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…
greg
October 13, 2009
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
October 13, 2009
ah.. thnx i’ll be trying something to make it work.
yobdab
October 13, 2009
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
October 13, 2009
@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
November 26, 2009
i have one image which i like to rotate can any one help in java script for that it is image file
manny
December 15, 2009
it is possible to auto flip?
Weneck.com » Prototype image flip
December 22, 2009
[...] found a great Javascript image flip function over at Webmuch and wanted to use it, problem was it was only implemented in JQuery. I was using Prototype and [...]