License:
Price: Free
# Downloads: 2150
Compatible with: IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome
jQuery Image Zoom plugin provides a detailed view of smaller images placed into web pages proving itself specially useful on websites that need to display high resolution photos of products that can’t be displayed directly into web pages.
Features
- Touch enabled – works on touch-enabled devices like iPad, iPhone or Android;
- Unlimited zooms on page – will not break your designs;
- Two image sizes – using a smaller image to display in page will decrease page loading time;
- Back-end loading – high resolution image will load only on demand (ie. when users wants to see the detailed view);
- Style with CSS – by providing custom CSS classes you can style all aspects of zoom (preview area, high resolution image loading, zoomed image area);
- Uses jQuery – this means you can easily use it on any WordPress blog.
Usage
First thing to do is to place the script files into your page header section:
<!DOCTYPE html> <html lang="en-US"> <head> <script language="javascript" type="text/javascript" src="jquery.js"></script> <script language="javascript" type="text/javascript" src="jquery-ui-drag.js"></script> <script language="javascript" type="text/javascript" src="zoomit.jquery.js"></script> </head> <!-- rest of page goes below -->
Please note that if you don’t plan on using the drag feature for moving the zoomed area over the small image, there’s no need for jQuery UI Drag widget. Also, if for some reason Drag isn’t available but you still want to use it (perhaps you forgot to also load UI Drag), the plugin will use the default mouseover event and issue no errors.
jQuery Image Zoom works on <a> elements. Make sure that the elements you use jqZoomIt() have css display:block set on them.
jQuery('a.my-class').jqZoomIt();
A more complete implementation would probably look like this:
;(function($){
$(document).ready( function(){
$( 'a.my-class' ).jqZoomIt();
})
})(jQuery);
Parameters
| Property | Default | Values | Description |
|---|---|---|---|
| mouseEvent | mouseenter | click, mouseenter, mouseover | Event that triggers the zoom. |
| zoomAreaMove | mousemove | drag, mousemove | Event that changes the zoomed area. |
| zoomPosition | right | top, right, bottom, left | Position of zoom related to zoomed image. |
| zoomClass | zoomIt_zoomed | - | Zoomed image container CSS class. |
| zoomLoadingClass | zoomIt_loading | - | CSS class to apply before the large image is fully loaded. |
| zoomAreaClass | zoomIt_area | - | CSS class for highlighted zoom area on small image. |
| zoomAreaColor | #FFFFFF | - | Color of zoomed area on small image. |
| zoomAreaOpacity | 0.5 | - | Highlighted zoomed area opacity. |
| zoomDistance | 10 | - | Distance of zoom container for large image from the small image. |
| multiplierX | 1.2 | - | Width of zoomed image related to small image. |
| multiplierY | 1.2 | - | Height of zoomed image related to small image. |
| is_touch | null | null, true, false | Touch devices detection. If left to null, the plugin will try to determine the browser version by itself. If true/false, internal functionality will be bypassed and the result provided on initialization will be used. |
Events
| Event | Return | Description |
|---|---|---|
| init | null | Triggers after the script is ready. |
| zoom | null | Triggers on zoom open. |
| close | null | Triggers when zoom closes. |
Changelog
-
1.0.1
- added demo to download showing how to create a small zoom gallery.
-
1.0
- Initial release