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!
Saturday, June 28, 2008
34 comments
More Mojo! - A free Image Zoom library Labels: effects, image, javascript
Posted on Saturday, June 28, 2008, 2:01 PM by Jacob Seidelin
34 comments:
Nice blog you have, I'm a regular "costumer" hehe.
Btw, have fun at Roskilde! I know I would! :)
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).
Ok, I'll have a look at that and see if I can find the cause. Thanks for the bug report!
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."
Ok, I'll see what I can do. Totally forgot about this, sorry.
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)
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.
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).
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?
Ok, I've posted an update that adresses some of these issues.
http://blog.nihilogic.dk/2008/10/mojozoom-and-mojomagnify-updates.html
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 :(
Hi! Mojozoom works great, but just one question: Can you make it to do multiple zoom? how?
Hi,
Its really nice and helpful me. Thank for sharing. i m very happy to use this.
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
@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.
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
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.
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
Please provide a link to a page that exhibits the issue. Also, there is no paid version.
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!
That's determined by the dimensions of the image you specify as the zoom image.
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.
Yes, it just shows the larger image in a small "window" on top of the image.
Awesome. Thats probably a much better way than trying to use javascript to enlarge it. Great tool.
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!
is there anyway to turn off automatic turn into link?
I don't know if there is, but the way I dealt with it was to make the href point to #.
I am Nusrat Ali from Pakistan , I really nice script.
I love all or you and your scripts.
thanks
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
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!
@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.
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
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.
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.
Post a Comment