Check out my
new book!
HTML5 Games book
MojoZoom and MojoMagnify updates MojoZoom and MojoMagnify - JavaScript image zoom and magnifying effects Looks like I promised a bug fix or two and failed to deliver.

In case you missed the original posts, MojoZoom and MojoMagnify are JavaScript effects that let you view high-res portions of images, creating a zoom- or magnification-like effect.
You can read the original posts here and here.

They were initially created as a response to similar effects released by Magic Toolbox, the difference being that MojoZoom and MojoMagnify are free, released under the MIT license and uses only JavaScript and DOM.

MojoZoom

There was a bug in IE where, if you moved the mouse really fast out of the image, the zoomed image would not disappear. This has been fixed.

It was requested that it should be possible to make the zoomed image always show and not disappear on mouseout. For this purpose you can now use the attribute data-zoomalwaysshow="true" on the image (example on the demo page) just as an extra argument has been added to the MojoZoom.makeZoomable JavaScript function.

It was also reported that MojoZoom would make IE7 crash, but I just can't get it to do that. If anyone has the same problem and feels like digging into the code a bit to try and find the cause, that would be much appreciated.

Visit the MojoZoom page for demos and download links

MojoMagnify

The same IE bug was present in MojoMagnify, so naturally that has been fixed as well. No other updates of note here.

I also found some issues when the image was relative positioned that I think are resolved now.

It still breaks if you use absolute positioning, but you can simply wrap the image in an absolutely positioned div if you need that.

Visit the MojoMagnify page for demos and download links


Also, there have been some comments about the use of the data-* attributes and suggestions that I should consider using something else, but since they're just another one of the many great things to come from HTML5 and I'm a fanboy, I think I'm going to stick to them. If it really bothers your need for validation, it's really rather to find and replace it in the JavaScript files. Using the MojoMagnify.makeMagnifiable and MojoZoom.makeZoomable functions to add the effects eliminates this problem, of course.

Finally, Giuseppe at extrowebsite.com has put up an Italian translation of much of the information on MojoMagnify and MojoZoom. Thanks!
⇓ 67 comments Anonymous

Hi there,
Mojozoom is great!
Just want to let you know that I've been testing it a little and seems like MojoZoom.makeZoomable function does not work in Chrome or Safari 3.1.
It only works if the data-zoomsrc attribute is added to the image, is that expected?

December 8, 2008 at 8:32 PM
Jacob Seidelin

Hey Kenny! Thanks for the feedback. No, you're right, it wasn't working as intended. I've uploaded an updated version 0.1.2 of MojoZoom with a fix (at least I hope it's the same problem you had).

There was a problem when calling it before the image had been fully loaded, so the code now does a few checks for that. I suspect the same problem exists in MojoMagnify since they share a lot of code, so I'll check that as well and update as needed.

December 10, 2008 at 12:53 PM
Jacob Seidelin

Yep. Updated MojoMagnify to 0.1.4, same issue.

December 10, 2008 at 1:03 PM
Codename: Steeve Knight

J.S.
I'd like to be able to re-src the target image and have mojozoom handle it.
I have it working with the following, but it does not clear away the src of the zoom view upon subsequent re-src's. result, if image zoom-src of image2 is smaller than image1 then image1 show's behind image2 in the zoom view:

[code]
<a href="/mybigpiclink.jpg" onclick="var mi = document.getElementById('main_image'); if (mi.__mojoZoomQueued) mi.__mojoZoomQueued=false; mi.src='/path/to/new-mid-sized-src.jpg'; var dzsrc = 'data-zoomsrc'; if (mi.dzsrc != 'undefined') { mi.dzsrc = 'path/to/new-full-sized-src.jpg'; MojoZoom.makeZoomable(mi, mi.dzsrc);} return false;"><img src="/path/to/mid-sized-src.jpg" alt="284"/></a>
[/code]

February 3, 2009 at 3:55 PM
Codename: Steeve Knight

...btw, the <img /> tag in the code above represents a thumb used to invite the resource of the mentioned main_image.

February 3, 2009 at 3:59 PM
Devin Wirth This comment has been removed by the author. April 14, 2009 at 7:26 AM Devin Wirth

Jacob,
I love this script.
But what I am trying to do is get then enlarged image to change when I change the smaller image. Is this possible to do with your script and if so could you please point me in the right direction on how to do this. Cause so far every thing I have tried has let me change the smaller image but not the lager one.
Thanks

April 14, 2009 at 7:28 AM
Jacob Seidelin

@Devin,
I see your problem. MojoZoom/Magnify doesn't register you changing the src and there's no way to tell it that it's changed. I'll put it on the to-do list, but the Mojo scripts aren't a high priority right now, unfortunately.

Perhaps you could simply replace the entire <img> element instead and then enable zoom/magnification on the new <img> with the makeZoomable/makeMagnifiable methods (see the demo pages for examples). Would that work?

@Steeve Knight: If you're still reading (sorry for the way too long response time). Sounds like the same problem as Devin's, no?

April 16, 2009 at 5:03 AM
Devin Wirth

Jacob,
Yea that should work. Got to admit it but I did not see that function when looking at the demo page before. Thanks for pointing it out.

April 16, 2009 at 7:44 AM
Anonymous

Hi Jacob,

Your script is amazingly beautiful, but may I know how could it be modified to negate the subsequent link effect (ie: accedential click on the big image resulting the full picture being exposed in the same web page). I don't want that second exposure to take place and just want to have everything as it is, fixed, hidden and unmoved and no secondary effect for opening a webpage.

Thanks & Rgds
Romesh Logan
( romeshlogan@yahoo.com )

May 6, 2009 at 5:13 AM
Jacob Seidelin

@Romesh Logan: If you wrap the image in a link yourself then the script will just use that link element. So you can simply make that link do nothing, ie. something like <a href="javascript:void(0);"><img ... /></a>

May 6, 2009 at 5:28 AM
Anonymous

Millions of thanks Jacob, it works pretty cool. As you advised I just modified the html file alone with a "href" and I'm done with it.

May the Lord Christ will ever be with you and direct towards all success while being in the path of spirituality!!!

Blessings
Romesh Logan
(romeshlogan@yahoo.com)

May 7, 2009 at 9:35 AM
jfcromp

What is the best way to stop the zoom feature onclick, like a reverse function of makezoomable?

June 12, 2009 at 7:18 AM
Gustavo

Hi, I need some help please.
I'm trying to implement this great function for my sebsite
Here's the page i'm testing:
http://www.colorcopiesusa.com/zoomfiles

The problem I'm having is that the zoommed area shows up very far away to the right from the original image.
Would someone be able to help me solve this issue?

I tried inserting the picture in a table but that did not work.
It might be somthing about classes, or ID, but i'm not sure what.

Please send me an email at gbaner@gmail.com

Thanks

June 27, 2009 at 12:07 PM
Anonymous

Hi Gustavo,

Have just seen your site as you referred, I think if you can set the exact parameters of the picture to be shown in the zoomable area, your prob can be sorted out. The adjustments to area parameters can just be found in the mojozoom.js file. But don't make these picture dimensions too long. You can have these pics resized through Photoshop to determine the required height & width. Manipulation for the zoomable length area adjacent to the pic can be found in the css file.

Rgds
Romesh
(romeshlogan@yahoo.com)

June 28, 2009 at 10:33 AM
Anonymous

Unbelievable work... is there a way to add a title or caption?

July 11, 2009 at 4:56 AM
Jacob Seidelin

Not at the moment. Where would you want captions/titles added?

July 13, 2009 at 12:36 AM
jfcromp

I'm still trying to hack your script so I can make an image not zoomable anymore. I have a web store, and I change the product image dynamically, but for some product color I don't have any image, so I was wondering how to make the image not zoomable, because right now I change the default image but the zoom image stay with the previous image I had.

July 13, 2009 at 11:08 AM
Jacob Seidelin

@jfcromp: Could you swap the entire img element instead of just changing the src - and then call makeZoomable() only when relevant?

I really should add some way to remove the effect, though. On the to-do list.

July 13, 2009 at 1:03 PM
Frank

The caption or title at the top would be awesome, with a way to set the background color and font. Actually its great as-is just something to add to the wish-list.
Thanks for taking the time.

July 13, 2009 at 4:16 PM
Jacob Seidelin

Ok, maybe I'll take a look at adding captions but it's not very high priority.

July 13, 2009 at 11:54 PM
jfcromp

Any tips on easily change the image and its zoom image?

July 22, 2009 at 10:59 AM
Jacob Seidelin

If simply calling makeZoomable() on the image after changing the src doesn't work, then no. You're not the only one who's had that problem, though, so I guess I should do something about it.

July 24, 2009 at 12:06 PM
Anonymous

Love this script. I'm noticing a glitch in IE8 that I'm hoping you can help with. The cursor box on the small image flickers and there's also a second box down at the bottom of the small image. Here's an example of what I'm talking about: http://tiny.cc/dO8p2

Everything looks great in IE7 and FF, so I'm guessing it has to be a browser issue.

July 31, 2009 at 10:25 AM
Robert

nice work, thanks for MIT licensing it!!

one request - I'd love to trigger the magnification window visible when one klicks on some other element of the page (like ... a skyline of Vienna and next to it a couple of text-links to important locations that get zoomed on click ... "riesenrad", "schönbrunn",...)

is that a trivial addition or does it require heavy lifting? that would really round off this beautiful feature of yours...

cheers,

Robert

August 4, 2009 at 2:29 AM
katch wreck

is there a way to "pause" or "freeze" the image so that it doesn't move and you can move the mouse away without losing the "zoomed-in" view? thanks

August 16, 2009 at 10:52 PM
Jacob Seidelin

@Robert: It's certainly possible to modify it so it can do just that - and you're more than welcome to do that, but the Mojo scripts are very low priority for me at the moment.

@katch wreck: There's no such option, no. Sorry. But as I replied to Robert, you're welcome to try and add that functionality yourself.

August 17, 2009 at 12:24 PM
Anonymous

Hi,
I'm calling the zoom function using MojoMagnify.makeMagnifiable via the onclick function (on a "Click here to zoom" link). Is there a way (on another link "Stop the zoom") to shop the zoom function (make the square disappear)?? Very nice script!!

Thanks you and have a nice day,

Marie-Hélène

September 24, 2009 at 4:41 PM
Anonymous

Very nice work!!

I've noticed two bugs that I need to resolve...

Here's my code :

(I put click but this is onclick... I couldn't post an onclick)

2X

< img src="images/1_gr.jpg" border="0" alt="" title="" id="image"/ >

So I have a link on 2X that makes to zoom appears...

1) In IE8, if I click a lot of times on the "2X", instead of one zoom square, I can see two zoom square one over the other?!?

2) After I click on the "2X", when I click on my image, the original big image (1_gr2.jpg) appears and replace all the content of my page like there was a link on it but no link is there?!?

I hope you can help me for my problems!!

September 25, 2009 at 6:42 AM
Jacob Seidelin

@Marie-Hélène: There's no such feature built in, no. You'll have to make one yourself, perhaps by replacing the image (or its parent link-element, really) with the original.

@anon: Please provide a link to an online page where I can see the problem. The big image appearing when clicking on the image is expected. See
this comment and my response for a workaround.

September 27, 2009 at 7:27 AM
Anonymous

Hello,

I love this script so much,

But i want some help from ur side.
i want chang the cursor with zoom icon when move small image.

please help me

September 29, 2009 at 11:07 PM
Sean@WMS

Beautiful work -- so much elegance with rather very light code.

I'm working on a set of instructions to enable folks to easily install this into their ProductCart Shopping carts (and I will definitely recommend that they donate to the cause in the instructions!).

However, PC has the option to have the product image on the left or the right. I'm just curious if you have a version that aligns the zoom image to the LEFT of the base image for when folks have their product image on the right side. I can work my way through it, but if you alright have a script revised for that, it would save me some time.

October 24, 2009 at 9:36 PM
Jacob Seidelin

@Sean: Take a look at the third example I just added on the MojoZoom page. Maybe that will work for you.

October 25, 2009 at 2:36 AM
Scott

Great script! Can you show a sample implementation of multiple images (or just post how to do it in this blog)? It would be nice to have main image shown, and then thumbnails below it. When a thumbnail is clicked, it replaces the main image and then the new image becomes "zoomable".

Hope that's not too complicated.

Thanks!

November 4, 2009 at 6:28 PM
Jacob Seidelin

@Scott: If you take a look at the other comments here, you'll see that there is no simple way to do that. I've got it on the to-do list of features to add, since so many have asked for it. My time is limited, though.

November 5, 2009 at 1:25 AM
Scott

Ok. Thanks for the reply. I noticed the website Anthropolgogie was able to figure it out. I'm just not savvy enough to understand what they did.

Check this out:
http://www.anthropologie.com/anthro/catalog/productdetail.jsp?subCategoryId=CLOTHES-NEW-TOPS&id=913829

November 5, 2009 at 6:47 AM
Nik

For anyone needing to update the zoomed image dynamically, the trick is to call the MojoMagnify.makeMagnifiable function from whatever JS function is updating the image. Thanks to Jacob for helping us figure that out. :)
The only thing that I can see that would be nice, which has already been suggested, is a toggle for disabling the linking of the zoomed image.
Otherwise, great job Jacob!

January 14, 2010 at 10:48 AM
Ed

Can MojoZoom be set up to zoom with in itself so the zomm area is in the same area of the image?

Is this easy to place into a wp blog??

Thanks

February 14, 2010 at 3:17 AM
Anonymous

Ok i did get it working in a WP blog and found out something i wanted to share. This makes it even more easy!!
When playing with it i had two of the same large images loaded for both big and small and in WP i re-sized the main image that messed up the code but what it did do is show me the re-sized code so i tryed that and it works.

So in WP you do not need two images just use the same larger image for both items and to make the one main image smaller just use code like this.



You add the -- alt="" width="200" height="200" to the main image to be what ever size you want it to be to show on your Wp page then do not do this for the full size image.
This saves a ton of time making a smaller image to use.
Hope this is some use to someone..

February 16, 2010 at 2:37 AM
Anonymous

Anyone have a way to make this zoom in it self?

I need that feature right now it is showing the zoom box off the screen using a grid of 12 them the right side ones show the box off the screen.

I would love to have this work as a zoom with in its own box.
Any help on this would be great.

Thanks

February 16, 2010 at 11:43 PM
asif

mojozoom is working great,but the problem i want to use mojozoom on more than one images on the same page

only first image is working.please any idea to get it working

waiting for help.

Thanks

March 5, 2010 at 1:55 AM
Unknown

Hi I really like mojozoom. It's a great peace of work.
But I have one problem. If I use css and make the image scrollable the magnified box is not positioned correctly :

.scancontainer {
border:1px solid #000;
background-color:#7b7d8e;
width:100%;
height:400px;
overflow:auto;
}

div class="scancontainer">
img src="scans/dok19_small.jpg" data-magnifysrc="scans/dok19.jpg" id=\"myimage\">

Can anybody help with this problem ?

Thanks

Peter

March 7, 2010 at 1:26 PM
Sean Britton

I just wanted to say thanks. This is a life saver for my site. Just thank you 100000xs over. Do you have a donation button?

March 21, 2010 at 7:46 PM
Marbry

Great code, I added a small modification to allow programmatically setting the display to the right or left.

This is modified in mojozoom.js under the mousemove event handler.

// Original
if (useDefaultCtr)
{
zoomImgCtr.style.left = w + imgPos.x + "px";
zoomImgCtr.style.top = imgPos.y + "px";
}


// Modified
if (useDefaultCtr)
{
if (displayOn == "left")
zoomImgCtr.style.left = imgPos.x - ctrWidth - (markerWidth / 2) + "px";
else
zoomImgCtr.style.left = w + imgPos.x + "px";

zoomImgCtr.style.top = imgPos.y + "px";
}

I just added displayOn as a flag set from an additional parameter to the makeZoomable() function, and used it to indicate which side I wanted the zoomed window on. Declare and init. it at the top of the file, set it from new param, then just add it to all the calls.

March 29, 2010 at 1:07 PM
darshan

Hi, Can anyone please let me know how to have the zoomed image height and width as 450 (H) x 350 (W) and the small zoom box in the thumbnail image as 150 (w) x 150 (h) ?

hope i am clear. thanks

May 19, 2010 at 7:21 PM
madhu

Hi..nice SCRIPT I must say..I used this on my magento application! works fine.
But I have a problem..I have 3 tumblain images which i am loading to the div of main image.I ahve changes ur script esp this function
MojoZoom.addEvent(window, "mouseover", MojoZoom.init);
which take the image url dynamically..
But problem comes here,the magnified image flickers..so pls tel me how to stop this flickering.

May 21, 2010 at 3:35 AM
nadhu

Hey people u can have the same effect on ur website just like this one with tumblain images getting zoommmed
http://www.anthropologie.com/
just a small change in function call...do let me know if u people want it!

May 24, 2010 at 5:07 AM
J

madhu I got the same problem.. with thumbnails it "flicks" and the zoom disappears for a second... Did you fix this issue??

Please let me know... jcasanova at google dot com

June 10, 2010 at 8:31 AM
madhu

ya have fixed that..create a even on mouse over and call the global function again..that will load all the functions again..that will work..
let me know if it dosen work i will post u the code..

June 17, 2010 at 10:01 PM
Anonymous

Hi, there.
It is a great script, however I have got a small problem. Image which is going to be zoomed covers menu (on the left) of the website . What to do with it? Please help.

June 22, 2010 at 3:00 PM
Anonymous

Oh sorry I have forgotten to add my website address http://slippers4you.com/309.html

many thanks

Mac

June 22, 2010 at 3:01 PM
Anonymous

Great Script!
Would there be a way to have two (or more) zoomed portions, e.g.
"data-zoomsrc1="enlarge1.jpg"
"data-zoomsrc2="enlarge2.jpg"
This would allow you to compare different versions, e.g. the same scene shot with two different cameras. So when you move the cursor over the image, you can compare the two zoomed portions.

July 23, 2010 at 9:29 AM
Anonymous

hi jacob, thank you very much for this js, it's very simple to integrate it and the result is great.
David

July 24, 2010 at 5:36 AM
Anonymous

Relating to my earlier post, another use for having two (or more) zoomed portions would be to compare "before" and "after" edited images.
When you move your cursor over the "after" image, you will see the zoomed portion of the "after" image, and another zoomed portion of the "before" image.
The "before" and "after" zoomed portions would move in synch when you move your mouse over the "after" image.

July 24, 2010 at 6:36 PM
Anonymous

love this script... using mojomagnify it doesn't seem to work in chrome or safari... any of you know why?

September 27, 2010 at 4:14 PM
Razvan Mihaiu

Hello,



This is not working in Google Chrome or Safari if the page is a bit scrolled down. Please check what is the matter.


Regards,
Razvan

February 14, 2011 at 3:33 AM
Razvan Mihaiu

Hello again,



I changed the function getElementPos(element) to this:

function getElementPos(element)

{
var x = element.offsetLeft;

var y = element.offsetTop;

var parent = element.offsetParent;

while (parent) {

x += parent.offsetLeft;

y += parent.offsetTop;

parent = parent.offsetParent;

}


return {
x : x,

y : y

}

}



and now it is working in Chrome as well.

February 14, 2011 at 4:15 AM
Razvan Mihaiu

Hi again,




The script is not working in IE9 because IE9 works without any hacks.

You need a function like this:

// Returns the version of Internet Explorer or a -1 (indicating the use of another browser);
function getInternetExplorerVersion()
{
var rv = -1; // Return value assumes failure.

if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}


to find out the IE version then only apply the hack for old IE:

var ieVersion = getInternetExplorerVersion();
// We need to detect versions of IE from IE1 to IE8; IE9 and UP don't need any hack;
var isOldIE = ((ieVersion > -1) && (ieVersion <= 8.0)) ? true :
false;



With those changes it works in IE9 just fine!!



Regards,
Razvan

March 22, 2011 at 5:21 AM
Paul

Here it doesn't work : it flickers in IE9 (like "Madhu" reports on May 21, 2010 3:35 AM).

Anyone to push me into the right direction?
Thanks!!!

Cheers,
Paul

June 2, 2011 at 2:12 PM
Domains

For those of you searching for an IE9 solution, Razvan Mihaiu was on target but may have confused some people with the use of "var isOldIE". Perhaps a more intuitive and bullet-proof solution would be to simply substitute the "var isIE" line within the MojoZoom function so that it reads as follows:

// check for pre version 9 Internet Explorer
var isIE = (checkForIE()<9 && !!document.all && !!window.attachEvent && !window.opera) ? true : false;
function checkForIE() {
var v = 999;
if(navigator.appVersion.indexOf("MSIE")!=-1) {
v = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return v;
}

June 9, 2011 at 3:09 PM
gruff

I still have some users complaining that this doesn't work with IE9. As IE9 does not work on XP I cannot check. :( But putting this on the page seemed to fix it:-

< meta http-equiv="X-UA-Compatible" content="IE=8" />

July 4, 2011 at 8:42 AM
Nick Fury

I know this post is a bit old but I figured I would try and ask a question anyway.

Is it possible to have the script point to a php database table of images ie: instead of directly to the raw image in the folder? I have a site set up and written in php where when the product image is brought up it's referenced in the above manner I have cited instead of directly to each image. There are just way too many of them the reference each and everyone of them.

If you can help I would deeply appreciate it.

Thanks,

Vern

September 1, 2011 at 12:02 PM
Nick Fury

< ?php echo $tb_imgmain? > this was the ie: I was referring to.

September 1, 2011 at 12:04 PM
Erik Ryerson

is there a limit to how many you can use per page? in IE 8/9 on the first two or three work. see if i'm crazy?
http://guycogecko.com/cresteds.html
email me @ erikryerson@gmail.com if you have any advice.

thanks

February 1, 2012 at 12:28 AM
Unknown

mojozoom.js (with Razvan Mihaiu's patch applied) doesn't work correctly in MSIE 10.0 (the zoomed image is never displayed). Any ideas what might be the culprit and how to fix it?

March 13, 2013 at 5:20 AM
Unknown

Firstly thanks for the work done. Your script is very simple to implement, but I have a problem I do not understand. As you can see on the link below, when the elevator is lowered to the bottom images, a gap is created between the zoom and the rollover image.

Anyway, look rather:
http://www.oyago.com/test/vue_test.php

Have you an idea of the problem?

Thank you in advance!

February 18, 2014 at 8:09 AM
Snarkables

Hi, great script and thank you for allowing us to use it. It's working fine with one problem. The cursor is off-center from the zoom window, about 100 pixels to the left. You can see it in this photo: https://www.flickr.com/photos/xiabolai/14200679123/

Can you tell me how to fix this?

Thanks!

May 13, 2014 at 3:13 PM
Post a Comment