permalink

136

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

Read Later submit to reddit

 

 image

 

 

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.


Demo

 

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

 

image

 

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.

 

image

 

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);

 

image

 

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.


Demo

136 Comments

  1. Pingback: Zoomer Gallery – A jQuery plugin for displaying images with Flash … | My Blog

  2. Pingback: Zoomer Gallery – A jQuery plugin for displaying images with Flash … | My Blog

  3. Pingback: 20 Professional jQuery Image Gallery Plugins : Speckyboy Design Magazine

  4. Pingback: 20 Professional jQuery Image Gallery Plugins : Speckyboy Design Magazine

  5. gymgangsta December 17, 2009 at 5:14 pm Reply

    How do you include a colorbox/lightbox once they click on the final thumbnail. I would think one wants to view the full size…800×600 etc… can we include a full size photo after the thumbnail?

    otherwise very nice….

    • Addy December 17, 2009 at 5:23 pm Reply

      Thanks!.

      One way of achieving this could be: Have jQuery find every 'img' element inside the container and then attach a click event to it so that if a user moves their mouse over the picture it will both display the "zoomer" effect but will also allow them to click on it.

      You'll notice at the moment that if you attempt to click on a hovered image nothing happens, but take a look at the source code for zoomer.js and you'll be able to edit it to include that logic without too many issues.

      Good luck!

    • Addy December 17, 2009 at 5:23 pm Reply

      Thanks!.

      One way of achieving this could be: Have jQuery find every 'img' element inside the container and then attach a click event to it so that if a user moves their mouse over the picture it will both display the "zoomer" effect but will also allow them to click on it.

      You'll notice at the moment that if you attempt to click on a hovered image nothing happens, but take a look at the source code for zoomer.js and you'll be able to edit it to include that logic without too many issues.

      Good luck!

  6. gymgangsta December 17, 2009 at 5:14 pm Reply

    How do you include a colorbox/lightbox once they click on the final thumbnail. I would think one wants to view the full size…800×600 etc… can we include a full size photo after the thumbnail?

    otherwise very nice….

  9. Pingback: 45+ Incredible jQuery Plugins Making Images more Dynamic and Elegant | tripwire magazine

  10. Pingback: 45+ Incredible jQuery Plugins Making Images more Dynamic and Elegant | tripwire magazine

  11. Pingback: 45+ Incredible jQuery Plugins Making Images more Dynamic and Elegant | Afif Fattouh - Web Specialist

  12. Pingback: 45+ Incredible jQuery Plugins Making Images more Dynamic and Elegant | Afif Fattouh - Web Specialist

  13. neil January 7, 2010 at 11:24 am Reply

    Cheers for this, i have had great fun using it. But i have a client who wants the title to animate from the bottom only, not to cascade down like it does. Is this doable? Would i be able to keep the title at the bottom only and perhaps fade them in?

    • Addy March 3, 2010 at 9:36 pm Reply

      To alter the title animation, change the below lines to change the position of the text from a base/bottom position to where you want the final animation to end.

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

  14. neil January 7, 2010 at 11:24 am Reply

    Cheers for this, i have had great fun using it. But i have a client who wants the title to animate from the bottom only, not to cascade down like it does. Is this doable? Would i be able to keep the title at the bottom only and perhaps fade them in?

  15. Pingback: Zoomer Gallery

  16. Pingback: Zoomer Gallery

  17. franz January 14, 2010 at 12:43 pm Reply

    sorry to disturb you. First of all, unfortunately I'm not a programmer at all. I download your very good "zoomer.js" and I'm using it with another jQuery plugin, "jquery.embedquicktime.js", to display a movie on the same page (see http://www.solitude.dk/archives/embedquicktime/).
    It seems that "zoomer.js" and "jquery.embedquicktime.js" are incompatible (if "zoomer" works, the QT movie doesn't work well and opens on a new page. If "embedquicktime" works well on the same page, zoomer doesn't work), but probably I'm unable to set properly the two codes in the html page. I would keep the two codes. May you help me please?
    Many thanks and best regards,
    Francesco
    Italy

  18. franz January 14, 2010 at 12:43 pm Reply

    sorry to disturb you. First of all, unfortunately I'm not a programmer at all. I download your very good "zoomer.js" and I'm using it with another jQuery plugin, "jquery.embedquicktime.js", to display a movie on the same page (see http://www.solitude.dk/archives/embedquicktime/).
    It seems that "zoomer.js" and "jquery.embedquicktime.js" are incompatible (if "zoomer" works, the QT movie doesn't work well and opens on a new page. If "embedquicktime" works well on the same page, zoomer doesn't work), but probably I'm unable to set properly the two codes in the html page. I would keep the two codes. May you help me please?
    Many thanks and best regards,
    Francesco
    Italy

  21. bob February 19, 2010 at 4:33 am Reply

    How do i get this to work in a wordpress blog page?

    I have been working on it for 2 hours now and it still will not work but it will work in its own html page.

    I need to have this working in WP

    Thanks

    • Addy March 3, 2010 at 9:34 pm Reply

      I can't vouch for what theme you may be using on your wordpress blog but it's possible that some of the files you're including are interfering with Zoomer. If possible, perhaps try accessing the gallery via an iFrame if all else is failing.

  22. Pingback: Zoomer Gallery – A jQuery plugin for displaying images with Flash-like zooming effects « BrightSpark

  23. Pingback: 15 jQuery Plugins to Create Stunning Image Zoom Effects | tripwire magazine

  24. Pingback: 15+ jQuery Plugins to Create Stunning Image Zoom Effects | World Wide Web

    • Addy March 3, 2010 at 9:31 pm Reply

      Hi Naz. You should be able to do this by altering the CSS and height dimensions given in the jQuery code for the plugin. If you have any further trouble with it, let me know and I'll do my best to help!

      • Frank Bailey May 14, 2010 at 6:36 pm Reply

        Hi Addy, I'm in the same position as Naz – Each of the images in my gallery is a different size. I could probably try to pass the width and height into your function, but when I've even tried altering the width and height values manually in your jquery function then the animation goes haywire in Firefox. Is there any chance that you might be able to offer some guidance as to how this plugin could be adapted to handle different widths and heights passed to it from the page?

        Thanks in advance :)

    • Addy March 3, 2010 at 9:32 pm Reply

      Nice project, Anders!. Do you have a demo online somewhere that we can use to check it out?. As Zoomer's been getting a lot of attention recently I may decide to update it with a few more features including better support for long-text.

  27. Pingback: JQuery Zoom Effekte zum Nachbauen

  28. Pingback: 14个jQuery图片放大编辑插件汇总 - 菠菜博

  29. Pingback: 14个jQuery图片放大编辑插件汇总 « theU0net.Blog

  30. Pingback: 14个jQuery图片放大编辑插件汇总 - IETester

  31. Mike March 17, 2010 at 11:09 am Reply

    Nice work, thanks for sharing!
    Is it possible to include the caption element in the zooming div, so that there is just one simultan, nested animation for thumb and caption?

  32. Pingback: 14个jQuery图片放大编辑插件汇总 - 互联盟

  36. Pingback: 14个jQuery图片放大编辑插件汇总 | LAMP开源技术

  37. Pingback: 25 Excellent jQuery Image Zoom Plugins Creating Stunning Image Effects | tripwire magazine

  38. Pingback: ” 14个jQuery图片放大编辑插件汇总– HTML5,CSS3,WEB前端设计开发资讯站

  39. Pingback: Zoomer Gallery – Flash’a Meydan Okuyan jQuery Eklentisi | sanalduvar

  40. 123doing June 8, 2010 at 3:07 am Reply

    It's very good.
    I like this.
    Thanks for share.
    And I wrote something to introduce this project for my readers.
    You can find the post about this in my website.
    If something is wrong,pls figure it out.thanks.

  41. Pingback: Zoomer Gallery开源项目 - Ajax代码大全 - Java开源项目 - 图片管理 - ajax图片展示工具 - Java免费软件 - Zoomer-Gallery - 开源网

  43. Pingback: 10 jQuery Plugins and Techniques for Doing More with Images | Resources

  44. Pingback: Pattern Inc » 10 jQuery Plugins and Techniques for Doing More with Images

  45. Pingback: 10 jQuery Plugins and Techniques for Doing More with Images | Focus of Photography

  46. Pingback: 13 اضافة لمعرض صور من jQuery

  47. Pingback: 10 jQuery Plugins and Techniques for Doing More with Images | crazyegg.net

  48. Pingback: 10 plugins y técnicas jQuery para crear efectos con imágenes | Blog AlmacenPlantillasWeb

  49. Pingback: 彼岸(Into the wild) » Blog Archive » 10 jQuery Plugins and Techniques for Doing More with Images

  50. Pingback: 10 jQuery Plugins and Techniques for Doing More with Images | Xiaoqi He ( Harry He ) – Official Blog – 贺孝琦官方博客

Leave a Reply

Required fields are marked *.

*