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.
Lets define some plugin variables with the head of our new code
$.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 call the script:
<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.
[...] the rest here: Zoomer Gallery – A jQuery plugin for displaying images with Flash … This entry was posted in jQuery and tagged either-language, finally-possible, javascript-over, [...]
[...] the rest here: Zoomer Gallery – A jQuery plugin for displaying images with Flash … This entry was posted in jQuery and tagged either-language, finally-possible, javascript-over, [...]
[...] Zoomer Gallery [...]
[...] Zoomer Gallery [...]
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….
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….
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!
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!
Nice blog I liked what i read. If you would write more information on this topic it would be highly apperciated! Thanks again!
watch free movies online
Nice blog I liked what i read. If you would write more information on this topic it would be highly apperciated! Thanks again!
watch free movies online
[...] Zoomer Gallery [...]
[...] Zoomer Gallery [...]
[...] Zoomer Gallery [...]
[...] Zoomer Gallery [...]
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?
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?
[...] Tutorial Tutorial Page [...]
[...] Tutorial Tutorial Page [...]
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
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
sick movie i loved it! sooo much . i’ve watchn it on
sick movie i loved it! sooo much . i’ve watchn it on
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
[...] tweetmeme_url = "http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/"; tweetmeme_style = "compact"; admin Read Post [...]
[...] Zoomer Gallery [...]
[...] Zoomer Gallery [...]
how can I change the size of images ? so that it is not square but 130×170px, appreciate any help!
thx
I just implemented it in my spare-time music player project for cover viewing (http://code.google.com/p/mucomp/). It would be nicer with better support for long texts but other than that this is one sweet little plugin.
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!
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.
Glad you like it Tomas!
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.
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’})}}}
[...] Zoomer Gallery [...]
[...] 11，Zoomer Gallery [...]
[...] 11，Zoomer Gallery [...]
No demo sorry. Just fill in a title for the picture of lets say 30 chars and you should see the problem. Thanks in advance.
[...] 11，Zoomer Gallery [...]
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?