Zoomer Gallery – A jQuery plugin for displaying images with Flash-like zooming effects

In today’s post, I’m going to be giving away a new plugin for jQuery that allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It’s a simple but elegant way of giving your interfaces a nice little shine and at only 2KB in size, it’s both compact and surprisingly easy to use.

The background-story

A while back, I used to work for an Image-Search company developing Flash image browsers for the company’s Front-end. One of the reasons we had decided to opt for Flash back then was simple – we wanted to provide our clients with some eye-candy that could both demonstrate our technology working and our knowledge of smart user interfaces. Being fluent in both JavaScript frameworks and AS3, I knew how to code up the UI in either language, but because the quality of such effects wasn’t up to par in JavaScript back then, we had to go for Flash.

With jQuery’s optimization of animation in javascript over the past few years, it’s finally possible for us to create Flash-like interfaces using just JavaScript. So, I thought it would be nice to demonstrate a jQuery plugin that will allow you to achieve the same effects we used to use without needing any Flash at all. Let’s see how it works!.

Let’s take a look at the code

Impressive animation effects can be achieved in jQuery with just a few short lines of code and this plugin is no different. What we want to achieve today is increasing the visible size of a thumbnail image from something smaller to something larger whilst also animating the title/caption of it. Rather than using multiple images for this process, what we are going to do in this post is use the same image for both the thumbnail and the “zoom”. To do this we need to ensure that all of our images are larger than the default size of our thumbnails (and optimally, a little larger than our zoomed in images). CSS Bi-cubic interpolation is used to keep everything looking clean.

Let's first define some of the options for our plugin:

	$.fn.Zoomer=function(b){
	var c=$.extend({
	speedView:200,    //The speed of the main animation
	speedRemove:400,  //The speed at which we remove the main animation
	altAnim:false,  //Whether we animate our alt tags or not
	speedTitle:400, //The speed of our title animation
	debug:false},b);  //A quick switch between debug mode
	var d=$.extend(c,b);

Now lets add two CSS classes for our code: The first is the default view for a thumbnail and the second is a class we attach to a thumbnail when someone hovers over it

ul.thumb li img {
width: 100px;
height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover{
margin-top:15px;
background:url(thumb_bg.png) no-repeat center center;
border: none;
}

Next, lets take a look at the code required to animate the image from it’s default size of 100px X 100px to a larger size.

Whilst we change over from our default class to the hover class, the effect we see will be a “grow” with the final state including a nice glowing border to it which is achieved using an image from the hover class above.

$(this).find(‘img’).addClass("hover").stop().animate({
	marginTop:’-110px’,
	marginLeft:’110px’,
	top:’50%’,
	left:’50%’,
	width:’175px’,
	height:’181px’,
	padding:’20px’},
d.speedView);

To make the effect look even better we want to animate the swinging in of our Title for the thumbnail. This is achieved as follows.

$(‘.title’).animate({
	marginLeft:’-42px’,
	marginTop:’90px’},
	d.speedTitle).css({
	‘z-index’:’10′,
	’position’:'absolute’,
	'float’:'left’})
}}}

We will also need to write some code to remove the effect elegantly when a user is no longer hovering over the current element.

$(this).find(‘img’).removeClass("hover").stop().animate({
	marginTop:’0′,
	marginLeft:’0′,
	top:’0′,
	left:’0′,
	width:’100px’,
	height:’100px’,
	padding:’5px’},
d.speedRemove);

and for the title..

$(this).find(‘.title’).remove()})}}})

How to download and include the plugin in your page

To include this plugin in your page and initialize it, simply define your list of images as follows:

<ul class="thumb">
	                <li><a href="#"><img src="image1.jpg" alt="Title 1" /></a></li>
	                <li><a href="#"><img src="image2.jpg" alt="Title 2/></a></li>
	                <li><a href="#"><img src="image3.jpg" alt="Title 3" /></a></li>
</ul>

and then include the script and initialize:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="zoomer.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	     $('ul.thumb li').Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
	});
	</script>

and that’s it!. You can download the tutorial pack or view a demo below. I hope this post was helpful.