Today I will tell you about another one useful tool of JQuery – Zoomimage plugin. It allow to reach different design ideas with images resizing.
Features
- Preloads images
- The images can by grouped in galleries
- Scales the image to fit the viewport
- Keyboard gallery navigation
As example, we want to animate list of your members or your image gallery.
Live Demo
The HTML
Here are sources of all 5 samples. As you notice – we having simple unordered list, they all quite same, only have different ‘id’ attribute.
<p> <a href="images/demo1_1.jpg" title="Seashell" class="example1"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a> <a href="images/demo1_2.jpg" title="Chain" class="example1"><img src="images/th_demo1_2.jpg" alt="Chain" /></a> <a href="images/demo1_3.jpg" title="Coins" class="example1"><img src="images/th_demo1_3.jpg" alt="Coins" /></a> <a href="images/demo1_4.jpg" title="Ice" class="example1"><img src="images/th_demo1_4.jpg" alt="Ice" /></a> <a href="images/demo1_5.jpg" title="Grass" class="example1"><img src="images/th_demo1_5.jpg" alt="Grass" /></a> </p> <p> <a href="images/demo1_1.jpg" title="Seashell" class="example2"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a> <a href="images/demo1_2.jpg" title="Chain" class="example2"><img src="images/th_demo1_2.jpg" alt="Chain" /></a> <a href="images/demo1_3.jpg" title="Coins" class="example2"><img src="images/th_demo1_3.jpg" alt="Coins" /></a> <a href="images/demo1_4.jpg" title="Ice" class="example2"><img src="images/th_demo1_4.jpg" alt="Ice" /></a> <a href="images/demo1_5.jpg" title="Grass" class="example2"><img src="images/th_demo1_5.jpg" alt="Grass" /></a> </p> <p> <a href="images/demo1_1.jpg" title="Seashell" class="example3"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a> <a href="images/demo1_2.jpg" title="Chain" class="example3"><img src="images/th_demo1_2.jpg" alt="Chain" /></a> <a href="images/demo1_3.jpg" title="Coins" class="example3"><img src="images/th_demo1_3.jpg" alt="Coins" /></a> <a href="images/demo1_4.jpg" title="Ice" class="example3"><img src="images/th_demo1_4.jpg" alt="Ice" /></a> <a href="images/demo1_5.jpg" title="Grass" class="example3"><img src="images/th_demo1_5.jpg" alt="Grass" /></a> </p>
Attaching CSS
I attached 2 external CSS files
<link rel="stylesheet" media="screen" type="text/css" href="zoomimage.css" /> <link rel="stylesheet" media="screen" type="text/css" href="custom.css" />
Adding JQuery
I attached 3 external JS files
<script type="text/javascript" src="eye.js"></script> <script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="zoomimage.js"></script>
And here are additional initialization code
<script type="text/javascript"> (function($){ var initLayout = function() { // example 1 $('a.example1').zoomimage(); // example 2 $('a.example2').zoomimage({ border: 20, centered: true, hideSource: true }); // example 3 $('a.example3').zoomimage({ controlsTrigger: 'mouseover', className: 'custom', shadow: 40, controls: false, opacity: 1, beforeZoomIn: function(boxID) { $('#' + boxID) .find('img') .css('opacity', 0) .animate( {'opacity':1}, { duration: 600, queue: false } ); }, beforeZoomOut: function(boxID) { $('#' + boxID) .find('img') .css('opacity', 1) .animate( {'opacity':0}, { duration: 600, queue: false } ); } }); }; EYE.register(initLayout, 'init'); })(jQuery) </script>
Step 4. Images and cursors
Also we need several images and cursors for these demos:
For developers. Customization.
Sure that it will useful too
Invocation code
All you have to do is to select the elements in a jQuery way and call the plugin.
$('a.myLinks').zoomimage(options);
Options
A hash of parameters. All parameters are optional.
Opacity | float | The opacity for the caption and controls. Default: 0.3 |
border | integer | Image’s border. Default: 0 |
duration | integer | Animation duration. Default 300 |
easing | string | Animation easing. Default: linear |
prevent | integer | Pixes to move the mouse before the images is dragged (prevents accidental dragging). Default: 14 |
controls | boolean | Whatever if the controls are displayed (if the image is not part of an library then the controls are not displayed). Default: true |
caption | boolean | Whatever if the caption is displayed (the caption text is the text from ‘title’ atribute. Default: true |
centered | boolean | Whatever if the image should be centered in the viewport or relative to the trigger. Default: false |
hideSource | boolean | Whatever to hide source when the image is opened. Default: false |
className | string | CSS class to apply to the image’s box. Default: false |
controlsTrigger | string | ‘focus’ to show caption and controls when the box is focused or ‘mouseover’ to show controls and caption on mouse over. Default: ‘focus’ |
preload | string | ‘click’ to preload the image when the trigger is clicked or ‘load’ to preload the image on document load. Default: ‘click’ |
onLoad | function | Callback function triggered when the image was loaded |
beforeZoomIn | function | Callback function triggered before the image is zoomed in |
onZoomIn | function | Callback function triggered when the image is zooms in |
beforeZoomOut | function | Callback function triggered before the image is zoomed out |
onZoomOut | function | Callback function triggered when the image is zooms out |
onFocus | function | Callback function triggered when the image is focused |
Close all images and clear orphans
If you want to close all openend images or clear images without triggers (remvoed from DOM) then you can use ‘zoomimageClear’. The selection for this plugin should always be ‘div.zoomimage’.
$('div.zooimage').zoomimageClear();
Live Demo
[sociallocker]
download in package
[/sociallocker]
…. another cool jQuery tutorial about making a zooming image plug-in !! Thanks Ayaz for the share !!
Can also be done with jQuery AJAX-ZOOM Plugin easily :: http://www.ajax-zoom.com
Very very helpful tutorial.
Thank you for Sharing!
it’s cool~
the theme is also cool,
Also been applied before the theme
its not working with latest version of jquery
Hi vinod,
Try to update both: jQuery library and the plugin itself. They might updated it for the latest jquery version.
$(document).ready(function()
{
$(‘#image’).click(function()
{
$(‘#image’).animate({ width: ‘800px’ , height: ‘700px’ });
});
Hi shakir,
Yes, it is also possible in case of basic behavior.