Check out my
new book!
HTML5 Games book
More Mojo! - A free Image Zoom library First, another image effect, MojoZoom. Like MojoMagnify, it lets you see a zoomed portion of the image by moving the mouse over it, but this one puts the zoomed area in a separate box. You can either let the script create the zoom box for you (with default size and placement) or you can specify any element which will then serve as the zoom "window". The effect can be added either with a custom attribute on the img-element or by calling a JavaScript function.

Check it out here

Second, it looks like I totally botched IE support in MojoMagnify before I posted it last week and didn't notice until now. It should be alright now. Also, as was mentioned in the comments, it is also possible to add this effect using the MojoMagnify.makeMagnifiable() method. More info on the demo page.

Both effects now also change the image into a link (if it is not one already) pointing to the high res version of the image.

There's still some testing to do (looks ok in IE7, FF2, Safari 3.1 and Opera 9), but it's late. Next week will (un-?)fortunately be more rockin' and less codin' as I'm off for a 8 days of rock, beer and (hopefully) lots of sunshine at Roskilde Festival. Then I'll be back and have time to finish some stuff that's a bit cooler than image zooming etc. Cheers!
⇓ 46 comments Tiago

Nice blog you have, I'm a regular "costumer" hehe.

Btw, have fun at Roskilde! I know I would! :)

June 29, 2008 at 4:05 PM
JoLePinguin

MojoZoom is almost perfect !
Many thanks it is really a usefull script.

A strange behavior with several pictures reported with FF2/IE6 : it's possible to move really fast the mouse and the onmouseout event seems not to be taken into account : the zoomed image remains displayed. This may disturbing if several zoom areas are overlying.

I will report a workaround if I make one (I guess hidding all zoom areas when displaying a new one should do the trick).

August 10, 2008 at 11:03 PM
Jacob Seidelin

Ok, I'll have a look at that and see if I can find the cause. Thanks for the bug report!

August 12, 2008 at 12:18 PM
Anonymous

Works Great!
However, does have the same issue mentioned above:
"it's possible to move really fast the mouse and the onmouseout event seems not to be taken into account : the zoomed image remains displayed."

October 19, 2008 at 11:34 PM
Jacob Seidelin

Ok, I'll see what I can do. Totally forgot about this, sorry.

October 20, 2008 at 2:44 AM
Anonymous

Hi, MojoZoom is realy great. But it somehow crashes in ie7 on load. I tested it on an other computer, but the same problem.. I have to restart ie every time. ff works good.

Also I wanted to ask if it's possible to directly show the div element and the zoomed image in it on load. Without doing a mouse over. And that it also remains visible after mouse out.

Tia,
Kees (The Netherlands)

October 20, 2008 at 4:17 AM
Jacob Seidelin

Hmm, I'm not able to reproduce any crash in IE. Does it just crash straight to desktop without any (meaningful) error?

I'm working on an update right now, I'll include an option to always have the high res image portion shown.

October 20, 2008 at 5:10 AM
Anonymous

No I get no errors.. IE just stucks (i hope i say this right). I have to kill ieexplorer.exe. But i'll test it again later this evening.

And an other question; how can I remove/switch off the link on the image, i coudn't find anything about that..

Tia,
Kees (sorry for my pour english btw).

October 20, 2008 at 7:32 AM
Jacob Seidelin

Ok, please do. It works just fine here.

You can't really remove the link, but you can wrap the image in a link manually in the HTML and then make the link do nothing, ie. <a href="#" onclick="javascript:void(0);" ...
Then the script won't add its own link.

Maybe that'll work?

October 20, 2008 at 7:44 AM
Jacob Seidelin

Ok, I've posted an update that adresses some of these issues.
http://blog.nihilogic.dk/2008/10/mojozoom-and-mojomagnify-updates.html

October 20, 2008 at 1:02 PM
vikram

Hey guys thanks very much for this i am glad that this is not for non profit and doesn't cost commercial users i only have ads on my website i do not know if having ads on websites is considered as being commercial website. the ads are used only to pay hosting bills :(

April 12, 2009 at 7:05 PM
Anonymous

Hi! Mojozoom works great, but just one question: Can you make it to do multiple zoom? how?

April 28, 2009 at 4:08 AM
Text Messages

Hi,
Its really nice and helpful me. Thank for sharing. i m very happy to use this.

May 28, 2009 at 2:53 AM
Anonymous

I just found it yesterday... and think it's unbelievable!
Would there be a way to add a title or caption? Or a circle instead of a square, I think I like the square more but just thinking out loud... I'm amazed, it's drop dead easy and works like nobodies business!

LASA

July 10, 2009 at 4:31 PM
Jacob Seidelin

@LASA: I'm glad you like it :-)

No title/caption, where would you want it added? Only rectangles are supported, you would have to use something like WebKit's CSS masks to get circles or other shapes.

July 13, 2009 at 12:40 AM
Anonymous

Awesome script-- even big companies like Anthropologie use it--

I'm having an issue though. I've got a shirt image and the color chart right next to it; the chart (only 40px wide) gets kicked to the bottom of the page when I include Mojozoom, which otherwise works fantastically. I'm trying to get the zoom overlay to float over/beside the chart.

Also, how do you remove the border on the image-- can't find it in either the css or js file (only zoom border). I can provide code, just didn't cant to clog up space here: email: sgriebel at vt.edu thanks man

July 13, 2009 at 1:03 PM
Jacob Seidelin

Cool, always nice to see it in use :-)

If you email me (jseidelin@nihilogic.dk) with a link or a complete set of files, I'll take a look when I get the time.

July 13, 2009 at 3:19 PM
Rick

Hi, I have several images on a page that use MojoZoom, paid version. In Firefox all images after the first two only allow user to see the hi-res upon click so the real-time zoom does not work.

Also, there is quite a delay in both IE and FF before the real time zoom works. I imagine this is because the hires pics are big.

Any advice would be appreciated

July 22, 2009 at 12:54 PM
Jacob Seidelin

Please provide a link to a page that exhibits the issue. Also, there is no paid version.

July 24, 2009 at 12:10 PM
Anonymous

Is there any way to change the amount it zooms in? Great tool by the way. Literally took my 10 seconds to add it to my Magento ecommerce site. Thanks!

September 1, 2009 at 10:39 PM
Jacob Seidelin

That's determined by the dimensions of the image you specify as the zoom image.

September 1, 2009 at 11:47 PM
Anonymous

Oh got it, thank you. So does this tool actually do any zooming or does it just show the larger image? Both are fine for my project, I am just wondering.

September 2, 2009 at 10:51 AM
Jacob Seidelin

Yes, it just shows the larger image in a small "window" on top of the image.

September 2, 2009 at 11:38 AM
Anonymous

Awesome. Thats probably a much better way than trying to use javascript to enlarge it. Great tool.

September 2, 2009 at 11:50 AM
CSky

What a terrific script. There are so many image zoom scripts out there, not all of them free, and none of them are as flexible or as cleanly coded as this one. I'm in the process of learning JavaScript and this has taught me a lot.

Good work!

October 1, 2009 at 2:37 AM
Anonymous

is there anyway to turn off automatic turn into link?

October 7, 2009 at 3:00 PM
CSky

I don't know if there is, but the way I dealt with it was to make the href point to #.

October 8, 2009 at 1:58 AM
Anonymous

I am Nusrat Ali from Pakistan , I really nice script.
I love all or you and your scripts.
thanks

December 18, 2009 at 11:33 PM
Beben

may you want to check this one ?
http://beben-koben.blogspot.com/2009/08/javascript-zoomer-teranyar.html
thanks for share. I am found brand new heres...nice to meet you

January 18, 2010 at 12:22 PM
Brian

Great script! I am creating an online atlas and wonder if it's possible to add the functionality of activating the zoom with a mouse-click or control (or other button) key so that the user can position the zoom in the center of a map then deactivate the function and be able to navigate the mouse for other purposes while viewing the zoomed image. As it is now the user has no choice but to leave the zoom box at the edge of the picture.

Thanks for any help!

February 8, 2010 at 3:18 PM
Jacob Seidelin

@Brian: Well, it's certainly possible to add that functionality, but I'm afraid the development of these scripts has pretty much stopped, except for the occasional bug fix.

February 9, 2010 at 1:20 AM
Heiko

The problem with "the chart (only 40px wide) gets kicked to the bottom of the page when I include Mojozoom" can be resolved by changing the line:
linkParent.style.display = "block"; to
linkParent.style.display = "inline";

By the way: i've modified the script to not scroll through images smaller then the specified zoomWidth/Height, to alternativly show the zoomed image left or right from the thumbnail-image depending on wether the thumbnail is on the left or right half of the current window.
Additionally the zoomed-images-position is corrected to always stay in the visible area (with exception of the left and right side).
This modified version can be visited here: /http://www.ib-hoebel.de/index.php?cPath=28_29_32
and downloaded here:
http://www.ib-hoebel.de/includes/mojozoom.js

February 26, 2010 at 7:56 AM
Heiko

Just fixed some problems with the mojozoom-script.
On IE the movement of the zoom-image was very bucking. IE seems to be to slow for rendering just in time with the occuring mousemove-events. If've fixed that with not evaluating mousemove-events more often than every 10ms.
Additionally if've removed the mousemove-event attached to document.body because this hack only works with only 1 zoomeable image on the side, not with several images. Instead i've changed the mouseout-event to mouseleave-event on IE and removed the "if (target.nodeName != "DIV") return;". With this the "mousemove"-hack is needed any more.

March 5, 2010 at 1:32 AM
BubblesBeads

I am sorry but this may sound really stupid, how do I use Javascript in Blogger? Under Layout/templates, I can only enter XML codes. On posting editors, I can only place HTML codes. Where and how do I use Javascripts in order to use the Mojozoom?

Thanks so much.

March 10, 2010 at 12:09 AM
cor van dijk

I am assembling a cdrom with some 5000 images which I would like to zoom. I am using Javascript but I am not a professional programmer. I downloaded mojozoom.js and mojozoom.css, and I tried a number of things, but I am unable to get it to work. Can someone give me some pointers as to how to set this mojozoom up? Do you call "MojoZoom" or do you do an assignment like "window.href = MojoZoom"? Or put both scripts in a "htm" file and somehow work from there. I am lost. Thanks in advance for any help. Cor van Dijk or

June 4, 2010 at 12:08 PM
Anonymous

Never mind, I figured it out. Great piece of code.
Cor van Dijk

June 6, 2010 at 11:01 AM
J

Hi jacob, any ideas how to have more than 1 zoom image?
with out fliking and problems?

June 14, 2010 at 9:20 AM
Heiko

@J:
You can download my modified version on http://www.ib-hoebel.de which fixes the flickering.

June 18, 2010 at 7:59 AM
Hidemik

Hy Jacob, great job!

I am trying to use it in a web page, but I have some problems: I have a terrible flickering under IE.
Link to my page: http://www.xfect.com/xfectfitshort.htm
Can anybody help? Thank you!

P.S. Also tried the modified version from Heiko, it doesn't work...(nothing happens when I move mouse over a picture)
Regards

Michele

January 10, 2011 at 2:54 AM
Hidemik

Addendum:
a) If i double click an image, it works.
b) If I enter a picture from the lower right corner, it works...

Hope it helps to find a solution!

Thanks to all of you for sharing and help!

January 10, 2011 at 2:56 AM
Kosta Haltis

Hi Hidemik, it seems that you've found a solution to your problem because your mojomagnify doesn't have a problem with flickering any more. How did you solve it?

March 31, 2011 at 11:38 PM
john r sherwood

for some reason my zoomed image appears high on the page unless my image is on the top of the page... the image i want o zoom into is in the middle of my page, and the zoomed image appears at the the tip when moused over... its this way i all browsers... how can i fix...

April 25, 2011 at 1:33 PM
tril

I have some problems with chrome 12 (and maybe safari 4), i changed two lines of the makeZoomable method.

var zoomWidth = zoomImg.naturalWidth ? zoomImg.naturalWidth : zoomImg.offsetWidth;
var zoomHeight = zoomImg.naturalHeight ? zoomImg.naturalHeight : zoomImg.offsetHeight;

August 4, 2011 at 12:30 AM
kataoli

Taka a look at my drag and drop puzzle. I'm using mojozoom for offering more details:

http://karate.zeitformat.de/kata/schiebepuzzle/heian_shodan_puzzle/drag_drop_sort_kata_heian_shodan/sorting.html

September 7, 2012 at 2:26 PM
Landon Peck

Hi. This is a very clever script. I was wondering if it is possible to fix the position of the zoom box.
< div class="mojozoom_imgctr" style="left: 541px; top: 0px; width: 250px; height: 250px; overflow: hidden; visibility: visible;">
This is the div that surrounds the image. I can change the size and margin but I want to fix it to far right of the page. Or a fixed left position of 790px will also work for me but I can't figure out what I need to change in the css or js to make it happen.
Any help would be brilliant if anyone knows?

December 24, 2013 at 11:47 AM
Saglik Birey

I am trying to use it in a web page, but I have some problems: I have a terrible flickering under IE.Sivilce tedavisi

May 29, 2014 at 7:19 PM
Post a Comment