JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 4.5/5 ( 1 votes)
Your Rating:
jQuery Zoom is a plugin to enlarge images on touch, click, or mouseover.
Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+.
Source: jacklmoore.com
1. INCLUDE JS FILES
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> <script src='jquery.zoom.js'></script>
2. HTML
<span class='zoom' id='ex1'> <img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/> <p>Hover</p> </span>
3. JAVASCRIPT
$(document).ready(function(){
$('#ex1').zoom();
});
4. OPTIONS
| Property | Default | Description |
|---|---|---|
| url | false | The url of the large photo to be displayed. If no url is provided, zoom uses the src of the first child IMG element inside the element it is assigned to. |
| on | 'mouseover' | The type of event that triggers zooming. Choose from mouseover, grab, click, ortoggle. |
| duration | 120 | The fadeIn/fadeOut speed of the large image. |
| target | false | A selector or DOM element that should be used as the parent container for the zoomed image. |
| touch | true | Enables interaction via touch events. |
| magnify | 1 | Sets the scaling of the zoomed image. |
| callback | false | A function to be called when the image has loaded. Inside the function, `this` references the image element. |
| onZoomIn | false | A function to be called when the image has zoomed in. Inside the function, `this` references the image element. |
| onZoomOut | false | A function to be called when the image has zoomed out. Inside the function, `this` references the image element. |
5. EXAMPLES
Using Colorbox with Zoom
$(document).ready(function(){
$('a.photo').zoom({
url: 'photo-big.jpg',
callback: function(){
$(this).colorbox({href: this.src});
}
});
});
To use zoom with img elements, they will need to be wrapped with another element. It is impossible to read some layout related CSS styles from JavaScript (percent-based width and height, margins set to auto, etc.) so the safe thing to do is to defer this change to individual site owners. The following is all that is needed in some cases:
$(document).ready(function(){
$('img')
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block')
.parent()
.zoom();
});
Removing Zoom
Trigger the zoom.destroy event to remove zoom from an element:
$('#example').zoom(); // add zoom
$('#example').trigger('zoom.destroy'); // remove zoom
