jQuery Zoom

A plugin to enlarge images on mouseover or mousedown.

Demo

Hover Daisy on the Ohoopee Grab Roxy on the Ohoopee

Download

Released under the MIT License. Source on Github (changelog).
Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+.

Instructions

Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like <a>, <span>, <li>, <div>, etc. This excludes <img> elements (see below).

// Example:
$(document).ready(function(){
  $('a.photo').zoom({url: 'photo-big.jpg'});
});

// 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();
});

Settings

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`, or `toggle`.
duration	120	The fadeIn/fadeOut speed of the large image.
callback	false	A function to call once the image has loaded. The execution context of the callback will be set to the image element.

Hey,

Follow me on Twitter and Github, that's where I'm most active these days. I welcome email (), but I'm afraid I no longer have time to answer personal requests for help regarding my plugins or posts. Thanks!

Follow @jacklmoore