So when using the plugin with default settings, it will fit the whole image, and not zoom the large image:

Original images:

If anyone knows how to fix this, it's working fine on some larger images:

1. Can you specify
   where the ZOOM image will be displayed ?
2. Can you "move" SELF image to different location , to different div maybe ?
   because ZOOM div is parent of image so for the time-being of ZOOM I would like to specify new div for image lens preview.

add your to https://cdnjs.com
so one can use git auto-update to add every released version files.

source: elevateweb/elevatezoom#140

Zoom size defined with minZoomLevel and maxZoomLevel is checked after size changes but should be checked before.

EXAMPLE:

config:

minZoomLevel:  1
maxZoomLevel: 3

results in:

minZoomLevel: 0.9
maxZoomLevel: 3.1

This is not a problem unless you use scrollZoomIncrement option with higher value like 2 or 3.

Maybe it could by on mobile like
Click or doubleclick fires zoom and image is zoomed then u can slide your finger to show the rest of the image.
Another click or double click stops inner zoom.

I use this plugin for a shop-type app where users upload their own product images so I don't have control over the size of images being used.

I've found that if the images used for the zoom are smaller than the zoomWindowHeight / zoomWindowWidth the zoomWindow goes a bit weird - especially when combined with the scrollZoom feature.
Currently the image is fixed in the top left corner of the zoomWindow with a white border around it - not a major problem but equally not ideal.
The bigger issue is when you zoom (via scrollZoom), the image zooms in but doesn't scroll when you move the mouse - it remains fixed to the top left corner.

My current workaround is to use the onShow callback with
onShow: function(self) {
var img = new Image;
img.src = self.zoomImage;
var bgImgWidth = img.width;
var bgImgHeight = img.height;
if (bgImgWidth < self.options.zoomWindowWidth) {
self.options.zoomWindowWidth = bgImgWidth;
$(self.zoomWindow).width(bgImgWidth);
}
if (bgImgHeight < self.options.zoomWindowHeight) {
self.options.zoomWindowHeight = bgImgHeight;
$(self.zoomWindow).height(bgImgHeight);
}
}

This resizes the zoomWindow down to the size of the zoomImage if it is smaller than the current size.

It's probably not the best solution but I think there should probably be something along these lines built in to handle this situation.

Cant use the CDN [https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.20/dist/jquery.ez-plus.min.js]

404 Not Found

It would be nice to have docs updated.

There are handy options like:

• zoomLevel - initial zoom
• minZoomLevel
• maxZoomLevel

Hello,

thanks for this great plugin.
i having a trouble when i'm using grunt wiredep on angular apps, the jquery.ez-plus.js not injected into my index.html.
After further investigation i found that you have

"main": [
        "dist/jquery.ez-plus.js",
        "css/jquery.ez-plus.css"
 ],

in your bower.json file, you set the jquery file on 'dist' folder while you have it on 'src' folder.
Edit: (i solved this issue by changing the 'dist' to 'src' in the bower json, but just in case other people have the same trouble)

Thank You,

When we changed the image, clicking on the thumb, the tag

Running:
npm install elevatezoom-plus or npm install angular-ez-plus throws an error indicating that such components are not part of the npm registry... Actually those are not available on https://www.npmjs.com

Hi,

eZ is a nice plugin so nice job on extending it. This issue I'm reporting is almost similar to the original eZ plugin whereas images that are more taller (portrait view) do not seem to work well with the plugin.

This happens with the 'inner' mode. It works on landscape sized images where widths are greater than the height, but for portrait images no, see below is the gif screenshot of the issue:

Hi,

I'm using the elevate zoom with a gallery. I'm trying to get it to work on a responsive site, I'm updating the zoomWrapper and image widths and heights when the window resizes, but once you click on a gallery item it resets. is there a way to run my code on the gallery click event? also on init?

I noticed that the function getInnerZoomStyle() in line 198 contains invalid CSS:

'px solid ' + self.options.borderColour + ';' +

Obviously, there is something missing, I also noticed that a similar function for zoomType "window" contains a border, so I suppose a copy/paste went bad at some point.

The line 198 should probably look like this:

'border: ' + String(self.options.borderSize) + 'px solid ' + self.options.borderColour + ';' +

Now, you get a proper border set based on the borderSize parameter and properly coloured based on the borderColour parameter.

It's a nice to have since this plugin doesn't need much custom css, so rather than putting

.zoomWindowContainer > div{
  z-index: 100!important;
}

to the stylesheet, why not have this option on the initialization itself?

I found two issues that affect my "inner" zoomType code.

1. The loading icon (spinner) does not appear on top of the image, instead it appears below. I had to add "top:0px;" to line 1278, for proper placement.

2. After switching between gallery images for several times, multiple loading icons appear underneath the images while they load. It seems like they are never removed. The line 1279 creates loading icons, but they are never remove()'ed from the DOM, they are only hidden at line 1490. To fix this, I added a class to the loading icon object, and use .remove() within donecallback.

When you are either on the mobile emulator or an active touch device, you need to tap twice to launch the zoom.

You can see this on every example on http://igorlino.github.io/elevatezoom-plus/examples.htm except for the one with the tint.

I have tracked it down and only if you set tint=true will it work properly.

For the lens border the configuration page shows lensBorder when it should be lensBorderSize

Is it possible to use the arrows (forwards and backwards on keyboard) to navigation the gallery images when Elevate Zoom has a gallery enabled? I know that when you enable the lightbox it works but it does NOT work otherwise. Support for both would be amazing!

The callback onComplete() is currently never called.

It could be called in line 558, but then it'd be called multiple times if selector in $(selector).ezPlus() matches multiple elements. Is this the expected behavior?

I'm using a gallery of images, with the images being constrained within a specific range of resolutions between 180x240 to 360x480 and everything in between.

This means that the images have all kinds of resolutions and aspect ratios, for example one image is 360x461 and another is 340x480.

The script as it is, does not compensate when switching between the images in the gallery. It will set zoomContainer and zoomWindow sizes for the first image and expects that all subsequent images have the same size.

My solution, was to add a few lines of code to recalculate zoomContainer and zoomWindow when a new image is loaded by the gallery. I added the following lines inside the doneCallback function (below line 1529).

            // Custom resize
            var newWidth = $('img.mainimage').width() + "px";
            var newHeight = $('img.mainimage').height() + "px";
            self.zoomContainer.css({ "width": newWidth, "height": newHeight });
            self.zoomWindow.css({ "width": newWidth, "height": newHeight });

I hope this helps.

https://github.com/igorlino/elevatezoom-plus/blob/master/src/jquery.ez-plus.js#L1119

reference: http://caniuse.com/#feat=es6-number
maybe a polyfill for this issue ?

Hi,

I appreciate your contribution. It helps me save time a lot. However, I just spotted a small issue out. After zooming a couple of zooming, the zoom container appear at the left top of the page. I do not know how to fix it. I have gotten stuck here for several days. Look at the pictures.

Please help me.

Thanks,
Justin.

because I load this script on modal, so I need to destroy it when the modal is closed.

source: https://github.com/elevateweb/elevatezoom/pull/111/files

this change was already before fixed, as part of code style, but its nice to attach the properties for debugging purposes.

source: elevateweb/elevatezoom#118

It adds {image#id}-zoomContainer id to the new .zoomContainer elements.
It allows to completely remove an elevateZoom associated to an image with id tag, by selecting the zoomContainer associated to an image with the id selector.
This is crucial for multi elevateZoom images in carousels, where the image moves and the zoomContainer was covering elements on the page.

For some reason, the documentation (in both the examples and API) specifies using the property "zoomWindowOffetx" for offsets on the x-axis, this property doesn't actually exist and instead you need to use "zoomWindowOffsetX", might be worth updating the documentation?

It seems zoomLevel is not working. I have a single image not 2.

Maybe as a workaround I could use scrollZoom : true, and then manually set the delta without the user using the mousewheel, but I did not find how to do it.

What can I do on this case?

line 10:
jQuery ezPlus 1.1.11

The constant could be self.options.attrImageZoomSrc

That's pretty much it. After calling .data('ezPlus').destroy() clicks on gallery items still update zoom image.

Hello,

I have the zoom working on the main image but I can't get the images to swap.

I'm using a loop to populate the gallery...
//Main Image

//loop to populate gallery

foreach (var image in Model.Images) { }

Please adivse

We're finding ez-plus adds some good functionality to our site.

We've noticed that when the browser starts off small and is re-sized to a larger size, the left and top positions of the zoom container are recalculated correctly in responsive mode. However the width and height of the container are not re-calculated so it remains of a small size.

Amending the code to the following appears to fix the problem:

        //container fix
        self.zoomContainer.css({
            top: self.nzOffset.top,
            left: self.nzOffset.left,
            width: self.nzWidth,  // new code
            height: self.nzHeight // new code
        });

I'm using this plugin to show inline zoom inside a bootstrap modal.
The high-res image I'm showing is really big and I would like to show a loading gif.
I tried setting "loadingIcon" without success.

In source code I see loadingIcon is only shown for galleries.
Can it be shown also for single image loading?

I'd like to specify the location in the DOM where the zoomWindowContainer element will be created.

Edit: Sorry, I'll explain this in more detail in a few minutes, I accidentally submitted this request too early...

I have a gallery with 2 images, the first 100x300 and the second 300x100.

After loading with tint=true, the tint window is 100x300. Then, click on the 2nd thumbnail and click on the preview image. The tint window is still 100x300 when it should be 300x100.

I have tracked it down to the SwapAction function and the elemHeight and elemWidth are not yet updated. I am not sure yet of the fix, but will contribute if I can find it.

Thanks
Matt

Hello,

I have an issue with the inner zoom, it adjusts to the size of the image loaded, but therefore, on a small screen, if will show a too zoomed image, and on big screen, the image will barely be zoomed :
See example here :
http://clients.studio24-24.com/melitta/product/melitta-baumeister-paul-jung-ss16-6414/

How could I fix this?

I'm trying activate window zoom mode on touch move, but I noticed it only works for inner zoom mode (see Line 366).

Does anyone know why it's restricted to inner zoom mode?
It seems to work fine if I just comment out the condition...

Hi, thanks for trying to continue this library :)

When appending a zoomContainer to a bootstrap modal the position of the zoomContainer gets messed up when the modal i placed in a scrolling position.

This is because the zoomContainer position gets its own position wrong if you have specified the "ZoomContainerAppendTo" option (which is not documented in ez-plus either?).

The position of the container gets placed relative to the Document, not the element specified by ZoomContainerAppendTo (.modal in this instance) as it should.

We should be able to fix this by checking if zoomContainerAppendTo is set and fixing the nzOffset appropriately by subtracting the top-offset of the ZoomContainerAppendTo element from the main element ( self.$elem.offset(); )

To elaborate:

Several places throughout the codebase you get the position of the element:

         self.nzOffset = self.$elem.offset();

So a fix would be to remove all instances of that line with a line that checks if ZoomContainerAppendTo is set and subtracts its position.

        if (self.options.zoomContainerAppendTo != 'body') {
            self.nzOffset = self.$elem.offset();
                appendedPosition = $(self.options.zoomContainerAppendTo).offset();
            self.nzOffset.top = self.$elem.offset().top - appendedPosition.top;

        } else {
            self.nzOffset = self.$elem.offset();
        }

Thereby always getting the correct offset.

This doesn't work somehow though? Event though i can see through console.log that the correct values are present in the self.nzOffset object.

Is anyone able to shed some light on why this doesn't work? Somehow the top position on the ZoomContainer element is still being set with the wrong non-subtracted value.

I can't seem to find where it gets set. To make it even weirder. If hardcode the top value set in line 642
to zero, it works in my particular case. Not a good hack though.

Hi. I don't see the responsive part working yet. Could you provide an example on how to rescale the imageZoom class so the image gets as big as the div it is in.

While minifying the script, I got an error at line 545 about a missing name after . operator, which led me to run jshint on the script, which in turn produced the following error, again at line 545:

jquery.ez-plus.js: line 545, col 18, Expected an assignment or function call and instead saw an expression.

1 error

The offending line is:

self.delete;

I see no reason why it should be there, so I've removed it.

I have an image that has zsPlus on it with a hyperlink surrounding the image tag. I have set touchEnabled to false. If i tap the image on a touch device (iPad in my case) the zoom feature is still triggered. I have to tap the image again to navigate to the link.

Shouldn't touchEnabled: false disable the zoom feature on touch enabled device?

Hello,

First, thanks for the plus version of elevate zoom.

I have a problem on my project with the plugin: i am using scrollable div and elevatezoom in this div is trigerred when i hover rest of my page.

I have tried many options but i cant fix that... Any idea?

Thanks,

Hello,

The zoom works on the primary image.
I'm having trouble getting the images to swap.
I'm populating my gallery using a foreach.

Upon inspecting the element I also noticed the a href zoom image, for every thumb in the gallery, is the primary image!

Please help and advise

ElevateZoomPlus - Images won't swap.txt

The zoom effect is not working properly in bootstrap modal . the zoom window is not opening properly

`$('.qvpopup').click(function(se){
    var image = $('#qvfeaturedimg');
    var zoomConfig = {cursor: "crosshair"};
    var zoomActive = false;


        se.preventDefault();
        $('#quickview').on('shown.bs.modal', function() {
             zoomActive = !zoomActive;
            alert('start');
             if(zoomActive)
             {

                 image.ezPlus(zoomConfig);//initialise zoom
             }
             else
             {
                $.removeData(image, 'ezPlus');//remove zoom instance from image

                $('.zoomContainer').remove();// remove zoom container from DOM
              }


      });`

link of image you can see here how it is showing i don't know is it css issue of modal

you can check here scroll to down click on product tab and then hover on image and click on quick view button then popup will appear where you can see all the things

Hi there,

The zoomWindowContainer remains open when you scroll to zoom in/out and quickly hover to another image. Does anyone have a same issue?

Cheers,

It would be a good idea to repo the /dist folder with minified files. This makes it lighter to consume via CDN.

The responsive feature works but it has some serious problem not removing previous zoom containers right after every window resize:

Here's my code:

The site I'm developing is on a responsive layout with elements being fluid (always width 100% of its container) such as the image and the zoom window container so we can expect that they always change sizes.

Maybe it should be attached to an event after on resize so that it won't create containers every step, but still I think there should be something that handles this.

Is it possible to adjust the zoom level for lens zoom?

I want to zoom in to a more detailed level. Currently, it can only zoom in, about 2 times larger than the original image.

I changed zoomLevel: 1, //default zoom level of image to other values but it seems that the lens image cannot match the original image anymore (shifted out of proportion). Am I missing changing other options?

Any help is appreciated!