Space Cat, Prince Among Thieves

JDZoom - JavaScript Image Magnifier

Recent Activity

Jesse Donat (donatj)

Readme/LICENSE fixes

Merge pull request #1 from bitdeli-chef/master

Add a Bitdeli Badge to README

Bitdeli Chef (bitdeli-chef)

Add a Bitdeli badge to README

Jesse Donat (donatj)

Fixed an issue with cross domain images

Fixed a regression where selector would only accept strings

Restructured Repo per MooTools Forge requirements
Added Options:

Magnified Position Option Added
options: fixed/float

Cancel Click Option Added
boolean, prevents default on an images anchor

Misc Code Cleanup...

Fixed "" style added

index.html demo's updated - shows many different
options and settings in action.
Added escaping to css url() calls to prevent problems with images with
spaces in file names.
Large Rework of Functionality
- Chrome compatability added
- Zoom box to magnified result math corrected
- Image preloaded
- Div now hovers over image rather than replacing
- Selector option added allowing an element, array of elements,
or a string selector to be passed.
- Internet Explorer Compatability fixes. and .gitignore added
Initial Commit

JDZoom is a MooTools powered hover zoom / magnifier similarly styled to the one featured on

It is supported by IE6+, Firefox 2.5+, Safari 2+ and Chrome

It does not interfere with click though, such it can be used in conjunction with almost any lightbox. In fact by altering the selector when you instantiate it, most lightboxes can be extended with JDZoom without touching the HTML at all. See the advanced demonstration for more details.

JDZoom requires MooTools, and is Compatible with 1.2.5+ and 1.3+

It does not require any components of MooTools More.

Click here for the Github repository.

View Advanced Demonstration

Example Source

	<link href="css/jdzoom.css" rel="stylesheet" type="text/css" />
	<script src="js/mootools.js" type="text/javascript"></script>
	<script src="js/jdzoom.js" type="text/javascript"></script>
	<script type="text/javascript">
window.addEvent('load',function() {
var jdz = new JDZoom();
</script> </head> <body> <a rel="jdzoom" href="images/venus.jpg"><img src="images/venus_thumb.jpg" /></a> </body> </html>
Initial Alpha
version 0.9 - nearing release
version 0.9.1

Comment by: Jesus on

Jesus's Gravatar Awesome work.

You are a genius.

Comment by: Himanshu Batra on

Himanshu Batra's Gravatar Thanks for this script....

Comment by: Manish on

Manish's Gravatar this need two images .. makes web site slower

Comment by: Jesse G. Donat on

Jesse G. Donat's Gravatar I disagree, and here's why.
  1. Modern browsers have become very good at scaling, especially with the inception of high dpi screens, many images on the web are higher resolution than displayed.
  2. Two images means you have to actually load two different images into memory.The large version will still need to be attached to the DOM to be viewed. You would want to preload the on page load. You don't want to do it on hover because that would be a bad user experience.
  3. Two images would eat more bandwidth.
This script is used on a number of large e-commerce and its performance has never been an issue.

Email address will never be publicly visible.

Basic HTML allowed.