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.

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.

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

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.

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

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!

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

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

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.

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!

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

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.

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?

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

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

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.

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

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

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.

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.

David,

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

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

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

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

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.

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

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.

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

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?

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.

will this work on ipad?

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.