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?

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.

Yep. Updated MojoMagnify to 0.1.4, same issue.

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]

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

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

@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?

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.

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 )

@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>

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)

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

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

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)

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

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

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.

@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.

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.

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

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

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.

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.

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

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

@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.

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

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!!

@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.

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

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.

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

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!

@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.

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

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!

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

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..

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

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

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

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?

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.

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

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.

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!

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

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..

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.

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

many thanks

Mac

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.

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

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.

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

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

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.

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

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

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;
}

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" />

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

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

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

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?

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!

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!