Hi,

When a page loads very slowly, if I click on the image, instead of displaying the zoom image side-by-side, I am redirected to the zoom image's page.

For instance, in this case I get redirected to images/zoom.jpg:

<div class="easyzoom">
    <a href="images/zoom.jpg">
        <img src="images/standard.jpg" alt="" />
    </a>
</div>

A quick fix is to add onclick="return false;" such as:

<div class="easyzoom">
    <a href="images/zoom.jpg" onclick="return false;">
        <img src="images/standard.jpg" alt="" />
    </a>
</div>

can you please add a mask around the mouse pointer to highlight the zoomed area like amazon zoom feature?

Thanks,
Dony

can you give another sample which has the function of triggering double click first before zooming the image, please?

Does this only work with JPGs? I'm using with different file types and it doesn't zoom on PNG files.

Teardown via the api only removes the events off the first image on the page.

In my project I noticed a strange problem. The adjacent zoom I'm using was sometimes not working on wide images (small height, larger width). So once you hover over such an image sometimes the zoom images is not shown.

I looked a bit deeper into the problem and I found the problem:

if (xl < 0 || xt < 0 || xl > dw || xt > dh) {
    this.hide();
}

Sometimes when you start hovering over such an image hide gets called instantly in this part of the code. So something seems to be wrong with the calculation for such image ratios.

I wonder why there even is this part of the code? I removed the condition so it just adjusts the css and it worked just fine because there is also the mouseleave event.

Hi again,

I found that if you quickly move the mouse into the flyout window it stays active, and does not dissappear.

If I increase the distance via the margin, then there is less chance of that happening but seems like a bug of sorts.

Hey man, great work on the plugin :)

I know that in the plugin's site it is working flawlessly, but when I used the plugin I had to do a couple of things on your CSS:

.easyzoom-flyout {
    position:absolute;
    z-index: 100;
    overflow: hidden;
    background: #FFF;
    /* added all below */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

For some reason, this div was below the container of the smaller image, with no width neither height, and with overflow hidden. and since the image inside .easyzoom-flyout had a absolute position, it was not appearing.

I know it's probably something in the structure of my website, but just to make sure you are aware of it :)

Ah, I was using the inside style of the plugin (appearing the image over the smaller image).

When i using the multiple images ,after changing the image the zoom image is considering first image instead of the selected image.when we try to callback _init() its not working

@i-like-robots I think you forgot to bump the bower version when you released 2.1.1. Can you look into it or should I submit a fix?

Make it possible to position the zoom panel over the source image. This would be suitable for larger images/ small screens

Would it be possible to have options to add a callback when the plugin initializes successfully, when a hover event starts and when it ends? I think this would help those that need to track these events in the page (like me :)

Thank you!

I've been having issues with the this.$zoom variable returning undefined.

This breaks the first method call on it on line 105.

It appears the issue is in the _load method. The onload callback for the image assigned to the zoom variable was firing before this.$zoom = $(zoom); was called in the event the image was cached. This means that nothing was appended to the flyout element and the the show method failing with the above error.

It's late here, so let me know if I explained that badly :)

I managed to fix it by calling this.$zoom = $(zoom); on line 139 before the onload callback is defined as well as on line 160. Not the greatest or most elegant of fixes, however it appears to work. That's all I care about for now!

@i-like-robots I used your code of easyzoom and works like charm. However, when I use it with slideshow, the easyzoom doesn't work anymore. For the complete of my question, please come here ....

http://stackoverflow.com/questions/24723502/the-slideshow-and-the-zoom-function-is-not-working-anymore-of-fetching-content

Listen for mousemove event to also display the panel. E.G. If users cursor is over the source image before EasyZoom loads.

Would it be possible to activate EasyZoom onClick instead of onHoover?

Thanks!

Following a call to the teardown() method, it appears we cannot reinitialise the plugin. Instead the following line prevents the plugin being re-instantiated:

Line 233:

if ( ! $.data(this, 'easyZoom') ) {

This still returns false after a teardown.

We want the ability to change the zoom image after the user selects a different thumbnail which loads a new image without a page refresh. At the moment we need to comment out lines 233 and 235 in order to run the following line again a second time in the code, which works fine but feels wrong:

$('.easyzoom').easyZoom();

Is there currently a correct way to refresh the zoom image?

Add option to preload full size image on init.

Sorry to double-post, I just saw the other issue was closed. Would you be able to provide an example of EazyZoom disabled by default and toggle to enable the zoom? I can't quite get it to function properly.

Not compatible with JQuery 1.8.3

Check this link -->
http://www.bangurnagar.com/displayDetails.php?type=SHOPPING&value=class/ProductDetailClass/shoppingProducts//Medicines%20Cabinet/Pentene.txt

For those images easy zoom not working.
Please revert fast.
Thanks for simple Jquery for image zoom.

Can anybody tell me where am i going wrong and what is wrong with my website that this plugin is not working.

http://cachetquo.com/index.php/men/wallets/leather-wallet-82.html#

The rel attribute is being abused to specify a source image, change it to a data attribute.

If using a gallery the zoom must be disabled (and loading cursor displayed) while loading a source image.

I have a situation where I must update an image on the fly when the user changes a color.
To make that work, I had to do the following, other tries did'nt work:
function updateDetailsPageImages(current_product) {
var newsrc = current_product.info['productimage'],
newimg = '';
$("#productimage").html(newimg);
var z = $(".easyzoom").easyZoom();
var api = z.data('easyZoom');
api.teardown();
z = $('.easyzoom').easyZoom();
..... more


Shouldn't there be a more elegant way?

Thanks for consideration
Uwe

Add a .swap() method to the API which will enable quick image changing, E.G.

api.swap("path/to/normal/image.jpg", "path/to/zoom/image.jpg");

It loads the image, shows the crosshairs cursor, but does use/zoom to the larger image.

Any way to control the speed of the zone being zoomed while going from top to bottom?

I try this code to set zoom image show default, but it not working:

var $easyzoom = $('.easyzoom').easyZoom();
var api = $easyzoom.data('easyZoom');
api.show();

How to show zoom image at default?

Line 178 should be changed to:

var offset = this.$target.offset();

Otherwise the offset is 0 (since the flyout is positioned absolutely) and the zoom image doesn't follow well.

Use the events touches array to count how many fingers are on the screen and use values to write to pageX and pageY

Hi,
Google Chrome: On Adjacent (or overlay) demo page, slowly move your mouse from left outside to right (inside).
Zoomed image does not appear.
Great plugin anyway.

Your plugin looks great, I love how simple it is! However, I am having some issues...

If I simply load the js file and instantiate it in my global.js file, it works. I have also added the recommended css styles to my main stylesheet. It works, but I can't add the class "easyzoom--adjacent" or add an extra styles to .easyzoom-flyout to control the layout. It breaks the append method and then no flyout container is generated...

This seems incredibly strange to me, because css rules shouldn't break any js...

Here's a page with my example : https://iambornandbred.com/shop/04-featured-multiple-images/

I'm going to leave some custom CSS on it so you can see that the flyout container isn't getting created.

Let me know if you need to see anything else, thanks.

I have a compressed css file, that combines all my css files together (based on PHP includes). After adding /css/easyzoom.css, I had to convert the encoding of /css/easyzoom.css to 'UTF-8 without BOM' (from 'UTF-8'), otherwise it didn't work (unwanted '\ufeff' appeared at the beginning of the file).

I downloaded the files from http://i-like-robots.github.io/EasyZoom/.

Look into making touch support an optional extra

Is there anyway we can limit the viewport for zoom images to a rectangle?

It appears that embedded CSS does function properly. For example

p>

div class="easyzoom easyzoom--overlay">
    a href="images/1_zoom.jpg">
        <img src="images/1_standard.jpg" alt="" style="float:left; margin:0 5px 0 0;width:352px; height:403px;" />
    /a>
/div>

This is text that should wrap around the image.....

/p>

Hello, Good to see you are still working on this. The previous version I was using the panel would fade quickly on rollover. What happened to that?

The cursor is a cop-out:

• It can't be seen on touch devices
• It implies an interaction has been made

http://jsfiddle.net/GKvEF/6/

Rapid mouseover/mouseout events cause a stack of zoom panels due to variable being re-assigned to new object.

Shadows implemented by MS filter totally kill performance. Semi-transparent thumbnails in example also need adding.

I was having problems with the zoomed image not showing up when the mouse was slowly entering from the bottom of the source image. Even though the mouse was inside the image, the function _move() would call hide() anyway. I added the following to debug:

console.log("xl: " + xl + " xt: " + xt + " dw: " + dw + " dh: " + dh);

I found out that upon entry from the bottom, variable xt would be 52.08, and variable dh would be 52.

In the following operation:

if (xl < 0 || xt < 0 || xl > dw || xt > dh) {
this.hide();
}

You can see that dx (52.08) is greater than (52) and thus thinks that we are outside the bounds, even if this is not the case. As the mouse continues going up, dx keeps decreasing, but the zoomed image has already been hidden, and it doesn't show until you leave and enter the image again (from a different side).

I solved the issue by adding Math.floor() to the xt variable. Hope this helps anyone having same issue.

I'd like to create a zoom with thumbnails like this:

http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

but I can't find an example on how to do it.

I'm using Foundation 5 and EasyZoom 2.3.0.

Out of the box, Foundation sets a global rule for img tags of max-width: 100%. If you are trying to use the same image but with a css scale tranform, like
.easyzoom-flyout img { transform: scale(2); }
Then you'll need to make sure that images in the easyzoom don't have a max-width rule.

.easyzoom-flyout img {
    transform: scale(2);
    max-width: none;
} 

Otherwise, EasyZoom will trigger the show and then immediately the hide events. I didn't look through the code here but I'm guessing EasyZoom checks to see if it's necessary to zoom at all, or maybe it keeps the mouse move positioning from looking weird if the image isn't zoomed at all.

Hope this helps someone

Hi guys, I was not sure where to put this as I could not find how to contact you Matt.

Just to say that I just did a quick test of EasyZoom jQuery library with the following setup & it worked just fine on those devices:

1. Apple iPad Air (see http://support.apple.com/kb/HT5452#ipad5 ), using Safari browser
2. Apple iPad Air (see http://support.apple.com/kb/HT5452#ipad5 ), using Chrome browser
3. Samsung S3 Mini, running on Android 4.1.2, using Chrome browser
4. Samsung S3 Mini, running on Android 4.1.2, using Firefox browser

Thanks for writting this plugin.

Thanks for the quick response on the last issue I had... I have it resolved now.

However, I'm using a little bit of js work to update the link href and main display image when a user clicks a thumbnail. The idea was that they could click the thumb, the main image would switch, and then on hover they would get a zoomed in version for detail.

This isn't working because I think the first image that a user hovers over gets cached, so when a user clicks a different thumbnail, it pulls up the original image even though the link href has been updated.

Any idea how I can patch this so easyzoom checks to see if the url has changed?

Am getting
TypeError: $easyzoom.swap is not a function

When doing this
$('.easyzoom').swap(standardSrc=bigImg,zoomHref=bigImgSrc);

Code for error is here:
http://stackoverflow.com/questions/23663305/trouble-with-easyzoom-jquery-plugin

Hi, first of all thanks for this great plugin.

How to reproduce the bug I found:

• hover over image
• while loading indicator is shown leave image area

Result: zoomed image gets displayed and stays displayed until you hover over the image again

If a user is using the gallery, clicks to load a new a new source image and moves back over the current source to view the full size image the zoom panel is removed and not reinstated. While it could be re-loaded on mousemove this is not satisfactory and could be prone to falling out of sync (due to functionality of the start() and loop() methods).

Instead, do not remove the panel and swap the full size image. This will require a separate method within the gallery extension.