jqZoomage jQuery component


I’ve built a simple jQuery plugin for use on a website I’m building and am in the process of submitting it to the jQuery plugins website. It’s a simple zoom panel, allowing your users to mouse over portions of your small image, to see a close up view. Ideal for use on product details page or similar.

Screenshot

Installation

Just add a reference to the script at the bottom of your page (where all your js should be anyway!)- as shown in the demo, this is a basic example;

$(window).ready(function() {
	$("#dinky-img").zoomage({
		zoomedImageContainer: "#big-img",
		zoomedImageUrl: "big-image.gif",
		stayActiveOnMouseOut: false,
		zoomedImageStartsCentered: true
	});
});

There are a couple of styles which are required for the view finder, and the mask which goes over the image (allowing you to customise the look)- add these rules to your style sheet somewhere;

#zoomage-view-finder { border: 1px solid #fff; }
.zoomage-view-finder-surround { background-color:#fff; opacity:0.7; }

As a general point, it’s best to run the script in a $(window).load() rather than the standard $(document).load(), as this ensures that all the images are loaded before the script begins, otherwise the script runs and grabs the width() and height() of the image to work out ratios, but these get returned as 0′s! More info on this can be found on the stack overflow issue about this

Configuration

zoomedImageContainer * Required *
Default Value : “#zoom-image-container”
This is the jQuery selector for the div which will act as the close up view for your image.

zoomedImageUrl * Required *
Default Value : “”
This is the URL of the zoomed image file. I generally use images 3 times larger than the original, however there isn’t a limit. The scale ratio is calculated on load.

stayActiveOnMouseOut
Default Value : false
If this is set to true, the view finder will continue to show in it’s last position even when the mouse pointer is moved off of the image. If false, the view finder will disappear on mouse out.

zoomedImageStartsCentered
Default Value : true
Indicates that, on load, the zoomed image view shows the center of the image.

centerOnMouseOut
Default Value : true
If true, on mouse out, the zoomed view will return to the center of the zoomed image.

Live Demo

You can check out a real life working version of it here!

Tested across all the major modern browsers (IE9/ FF4/ Chrome10)- give me a shout if you spot an issue.

Download

Current Version 1.2 – 2011-09-10
Unminified Development Version
Minified Production Version

Licence

This plugin is available for use under the MIT licence. For more info see http://codeblog.shawson.co.uk/storage/jquery.zoomage/licence.txt

jQuery Plugin Site Link

The official jQuery Plugin catalogue link for this plugin is http://plugins.jquery.com/project/jqZoomage

  1. #1 by Paul Burlumi on September 11, 2011 - 16:52

    The demo works on my Nexus S. Very cool!

  2. #2 by shawson on September 11, 2011 - 17:50

    Bonus! I’ve not tried any mobile browsers myself yet- Cheers for giving it a go!

  3. #3 by Gareth on September 12, 2011 - 17:02

    Awesome Shaw. I was looking at this yesterday which is similar i think:

    http://odetocode.com/Blogs/scott/archive/2011/08/21/a-magnifying-lens-using-script-and-css.aspx

    Also, IE8 doesnt work! :)

  4. #4 by Shawson on September 12, 2011 - 17:27

    Oh I like his- nice find.

    Lol yes, that is totally knackered in IE8.. guess I’d better look at it!

  5. #5 by Mart on September 22, 2011 - 05:13

    Nice work Shawson, I likey! :-)

  6. #6 by Matt Zimmermann on December 2, 2011 - 21:02

    Nice looking plugin. Would be great if there was a way to specify the “zoomedImageUrl” as a DOM element or as an attribute (like rel) of the calling item. Also, maybe a way to have the zoom image container hidden until you mouseover the main image.

(will not be published)