Check out my
new book!
HTML5 Games book
MojoMagnify - Free JavaScript Image Magnifier There was a post on Ajaxian a couple of days ago about a set of JavaScript image effects, one of them being a magnifying effect. It's nothing new really and this one used Flash to do the effect. So, for a small Monday project I made a similar effect in JavaScript that I have named.. MojoMagnify.

MojoMagnify simply adds a magnification effect when you move the mouse across the image. I didn't want to drag canvas into this, so it's limited to a non-fancy rectangular magnification area, although it's possible to take advantage of Webkit's CSS masks and have a circular magnifier (or whatever you fancy). (Example of that here)

It's pretty easy to use, just include a single JS and CSS file and add a custom "data-magnifysrc" attribute to any image you want. As you might have guessed, the value of the attribute is the path to the large version of the image.


<!-- the custom 'data-magnifysrc' attribute specifies the source of the large image -->
<img src="kendwa_small.jpg" data-magnifysrc="kendwa_big.jpg" />


Of course, you're not restricted to using a larger image, as seen in the example to the right where, instead of a high res picture, a same-size color version is used to add another type of effect.

The (MIT licensed) code is about 2.6 KB minified plus a bit of CSS to style to magnification area.

Live demos and download link here
⇓ 33 comments richtaur

Very cool, I knew someone would put together a free version of this.

So my first immediate thought is providing another way other than via the data-magnifysrc attribute, which will throw errors when validating against any standard doctype. Perhaps a version of the script that allows individual calls to be made, like MojoMagnify.set('image-id', 'magnify-src'); ?

Anyway, cool stuff.

June 23, 2008 at 12:54 PM
Jacob Seidelin

Thanks. The data-* attributes are part of the HTML5 spec, so one day they might be ok. But until then you should be able to do:
MojoMagnify.makeMagnifiable(image, src);
where "image" is an Image element.

June 23, 2008 at 1:31 PM
Mathieu 'p01' Henri

Would be neat to wrap the image into a link to the magnified image as well.

June 23, 2008 at 1:56 PM
Jacob Seidelin

Yea, maybe. Sometimes you'd probably want it to go somewhere else, though, like a product or order page or whatever. Maybe I'll make it link to the larger version if the image is not already a link.

June 23, 2008 at 3:12 PM
Fabrizio Calderan

Good library, but consider to use a compliant xhtml attribute instead of data-magnifysrc (in some circumstances inline attribute could be more useful than using MojoMagnify.makeMagnifiable() method)

So, as example, I changed that attribute in 'longdesc'.

Fabrizio

July 14, 2008 at 7:05 AM
Paul (UK)

This looks great and really smooth motion.

How would I modify this code so if the mouse moves off the image then the zoom box disappears? You know like if someone wants to view the original intact again after zooming around.

That would make it absolutely perfect!

Keep it up!

July 31, 2008 at 2:55 AM
Jacob Seidelin

@paul (uk): Yea, looks like it wasn't removing the box in IE. Should be fixed now.

July 31, 2008 at 4:51 AM
Anonymous

How can I control the link? Let say I want to go to another page instead of the image.

October 14, 2008 at 1:05 PM
Jacob Seidelin

You'll have to wrap your img tag in a link manually, that the way the script should pick up that the image is already linking to something and not to do anything other than add the effect.

October 15, 2008 at 12:18 AM
kd

Hey Jacob, thanks for this great little tool!

Does this method work with dynamically created images? Basically, we generate a small thumbnail when a user drags an item in the list and when they hover over the image, i want them to be able to see the magnified version but it doesn't seem like it's doing it.

another random thing is, is it possible to modify the code so the larger image isn't confined within the space of the smaller image? (ie, our thumbnails are quite small and to have view the larger image within those thumbnails are kind of pointless.

Thank you, so much!

and again, thank you for this!

December 11, 2008 at 8:32 AM
poluz

Great tool! Maybe a good addition would be a zoom disabling function...

March 5, 2009 at 3:19 AM
Anonymous

Gret tool and effect.

I like to use it together with a dropdown menu to choose different pictures in a div. The new low resolution picture is showing, but the magnifier is not working on it. Any idea of how the magnifier could also work on the picture that is changed by the dropdown menu?

Thank you a lot.

March 9, 2009 at 8:17 AM
Anonymous

Hi,
it is a great a simply magnifier.
How can I integrate a scroll function for large images that the magnifier can scroll down on the image?

March 23, 2009 at 7:37 AM
Anonymous

Hi Jacob,

Thanks for your magnifying codes and it woks well. But as you may see in the display of black & white image to colour image (ie: roskilde_bw.jpg to roskilde_color.jpg) there is nearly 2 pxl of colouring effect is getting omitted in the magnifier while hovering right and the bottom of the picture.

You too can clearly observe this as displayed in this site. May you suggest as how can we correct this tiny default?

Thanks & Rgds
Jude

May 16, 2009 at 9:25 AM
Anonymous

Hi Jacob,

i'm Jude again, but when I wrap the html image sources (colour & B&W) into a href "javascript:void(0);".... that default of 2 pxl colour omission is automatically being negated.

May I know why does this happen just for wraping it up into a simple href without adjusting any height & width of the pictures or the magnifier.

Thanks & Rgds
Jude

May 16, 2009 at 9:45 AM
Jacob Seidelin

Hi Jude,

Thanks for the bug report. I see the problem in IE (it looks ok in Firefox) but I don't know what's causing it. I'll put it on the todo list and look into it the next time I get around to looking at the script.

May 16, 2009 at 2:43 PM
Anonymous

Hi Jacob,

Can you facilitate the now popular web technology of peel off page in your site too as the latest js addition and for the benefit of your regular visitors? These codings can be referred in the below site;

http://www.marcofolio.net/webdesign/create_a_peeling_corner_on_your_website.html

Thanks & Rgds
Jude

May 17, 2009 at 6:38 AM
Anonymous

Hi Jacob,

Thanks for your wonderful creativities and of course they work marvelously in IE & FF. Can we change the square magnifier into a circle magnifier? if possible may I know the changes in the css or in the js please?

Rgds
Kevin

May 20, 2009 at 5:37 AM
Jacob Seidelin

Hi Kevin,

Thanks. You can't really do anything other than a rectangle, except in Safari where you can use CSS masks. There's a link to an example of that in the post, but it won't work in any other browsers.

May 23, 2009 at 7:39 AM
Anonymous

Hi,

Problems in IE if its wrapped with a href. If one clicks on the image during the magnification the click to the new page doesn't work. In Firefox its ok.

Any ideas what I can to do.

Thanks
David J.

June 24, 2009 at 2:25 PM
Jacob Seidelin

David,

Email me (jseidelin@nihilogic.dk) with a link to the page with the problem.

June 27, 2009 at 4:04 AM
Anonymous

Hi Jacob,

Using the innovative brainchild idea of yours, I managed to inscribe directional maps to sites with manipulation for wrapping up codes and all these small wonders work well in IE & FF without any hassle. Should you want to witness the masterpiece of your wonders in action, just trail to the contact pages of www.sleepytime.lk and www.smartecworld.com as living testimonies.

Again all these credits should be attributed to you Jacob for having availed through this column and I owe you a lot for gaining the knowledge from an erudite guru like you.

Thanks & Rgds
Jude

June 28, 2009 at 9:45 AM
Mike Mai

any way to make this work inside the looped sliders? http://nathansearles.com/loopedslider/

August 4, 2009 at 9:52 AM
Jacob Seidelin

Mike, do you have a page where I can see what doesn't work?

August 6, 2009 at 12:02 AM
lLoyd

hi jacob
just came across this great work
was there ever an answer to Mike Mai ...
any way to make this work inside the looped sliders? http://nathansearles.com/loopedslider/

that would be sweet
thank u for all your inspired efforts
lloyd g

September 30, 2009 at 11:35 AM
Anonymous

Jacob,
This is a really useful script. Thank you for making it easier for all of us fellow developers hard pressed to meet deadlines.

Just a quick question: is there a way to change/specify the magnifying power either as a div parameter or in the script? Currently, the level of magnification depends on the larger image resolution. Correct?

There is of course some likelyhood of image pixelation as a result of over- magnification. However, it would be useful to be able to specify some sort of magnifying power over and above the larger image itself.

January 4, 2010 at 5:05 AM
Anonymous

Hi,
This is a nice script but i am unable to magnify my pictures some more resolution. i need to magnify pictures a little more bigger.
Any help please.
Thanks in advance

Ibrar

February 10, 2010 at 11:48 PM
Chris

Hi,
I have a strange problem in IE8. The zoom box element wobbles around the page and goes crazy.

http://www.sohaute.cc/dresses/35-off-shoulder-zipper-dress.html

I can't think what the problem can be.

April 20, 2010 at 3:17 AM
ben

Hey Jacob, I'm not sure if you still read this but...

This is brilliant, exactly what I have been looking for. Do you know if there is a simple fix to clear the image. This is my problem http://www.tinydesign.co.uk/newsite2010/logodesign.html

Thanks

ben

May 4, 2010 at 9:26 AM
phil

Hi Jacob,
Really nice work, thanks. V. classy.
I've got a gallery of thumbnails that all load into a single bigger viewport when clicked but I'd like to add the magnify effect for extra zooming detail. How would this work?

September 4, 2010 at 1:33 AM
lequocthai

It's pretty easy to use, just include a single JS and CSS file and add a custom "data-magnifysrc" attribute to any image you want. As you might have guessed, the value of the attribute is the path to the large version of the image. I'd love to get this working but data-magnifysrc comes up with "not a valid attribute of element img"
I am using VS 2010 (for my sins)
Any ideas would be greatly received.

March 9, 2012 at 7:29 PM
pradeep

will this work on ipad?

March 22, 2012 at 11:49 PM
DJ Boeren

Thanks for a nice script Jacob! I did notice it had problems on IE so I took a closer look and it seems that a positial correction specifically for IE messed it up, depending on the version used.

I added 2 extra IE checks, 2 extra lines below "var isIE9...." on line 89 (added some comments so line numbers may not correspond to yours):
var isIE = !!document.all && !!window.attachEvent && !window.opera;
var isIE9 = isIE && (navigator.userAgent.indexOf("Trident/5.0") > -1);
var isIE9CompatibilityMode = isIE9 && (navigator.userAgent.indexOf("MSIE 7.0;") > -1);

I then modified the check on line 272 from:
if (e.srcElement && isIE) {
to:
if (e.srcElement && isIE && (!isIE9 || isIE9CompatibilityMode)) {

It will not check if you are using IE9 and if so, if not using compatibility mode, it will not use the correction. Seems to work correctly for versions 7, 8 and 9.

August 30, 2012 at 2:08 AM
Post a Comment