cool jQuery animation effect gallery
Today we would like to show you how to create a modern gallery (with cool animation effect) using Raphael library and jQuery.
Create three files: index.html, default.css, init.js and download Raphael library. Then include all files in your head section:
<link href="css/default.css" rel="stylesheet" type="text/css"> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/raphael.js" type="text/javascript"></script> <script src="js/init.js" type="text/javascript"></script>
Let's begin with lay down a simple HTML markup.
index.html
<div class="gallery"> <ul class="reset"> <li><img src="img/img1.jpg" alt=""></li> <li><img src="img/img2.jpg" alt=""></li> <li><img src="img/img3.jpg" alt=""></li> <li><img src="img/img4.jpg" alt=""></li> <li><img src="img/img5.jpg" alt=""></li> <li><img src="img/img6.jpg" alt=""></li> <li><img src="img/img7.jpg" alt=""></li> <li><img src="img/img8.jpg" alt=""></li> </ul> </div>
We are creating main container called 'gallery', which holds unordered list with images. All images have size 400px on 400px.
default.css
ul.reset, ul.reset li { display:block; list-style:none; padding:0; margin:0; } .gallery ul li { width:200px; /* a half of image width */ height:200px; /* a half of image height */ margin:0 10px 10px 0; float:left; position:relative; } .holder { position:absolute; top:0; left:0; margin:-100px 0 0 -100px; /* margin-left: a half of 'li' width and margin-top: a half of 'li' height */ }
As you see, it is very short style file. I give you a free hand!
init.js
$(function(){ var li = $('.gallery').find('li'); // find all 'li' elements li.each(function(i){ var t = $(this), img = t.find('img'), // find image in 'li' element src = img.attr('src'), // get path to your image width = li.width(), // get 'li' width height = li.height(); // get 'li' height img.hide().after($('<div>').attr('id', 'holder'+i).addClass('holder')); // hide all images and create containers for Raphael objects var r = Raphael('holder'+i, width*2, height*2), // create Raphael objects rimg = r.image(src, width/2, height/2, width, height); // create new images using previous variables rimg.hover(function(event) { this.animate({ scale: 2, // enlarge your images to the normal size rotation : 360 }, 1200, 'elastic'); }, function (event) { this.animate({ scale: 1, // decrease size of images rotation : 0 }, 1200, 'elastic'); }); }); li.hover(function(){ li.css({ 'z-index': 1 }); // set z-index to all 'li' elements $(this).css({ 'z-index': 2 }); // set z-index to the hovering element }); });
That's it!
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu