igorlino / elevatezoom-plus Goto Github PK
View Code? Open in Web Editor NEWEnhanced elevateZoom - A jQuery image zoom plugin
Home Page: http://igorlino.github.io/elevatezoom-plus/
License: MIT License
Enhanced elevateZoom - A jQuery image zoom plugin
Home Page: http://igorlino.github.io/elevatezoom-plus/
License: MIT License
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
The constant could be self.options.attrImageZoomSrc
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
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.
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
});
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 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,
Cant use the CDN [https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.20/dist/jquery.ez-plus.min.js]
404 Not Found
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?
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.
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!
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?
add your to https://cdnjs.com
so one can use git auto-update to add every released version files.
source: elevateweb/elevatezoom#140
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.
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?
I found two issues that affect my "inner" zoomType code.
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.
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.
It would be a good idea to repo the /dist folder with minified files. This makes it lighter to consume via CDN.
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
<script> //elevate zoom II $(window).load(function () { $('#product-image').ezPlus({ gallery: 'product-image-gallery', galleryActiveClass: 'active', imageCrossfade: true, }); }); </script> <script> $(window).load(function () { $('#product-image').bind('click', function (e) { var ez = $('#product-image').data('ezPlus'); ez.closeAll(); //NEW: This function force hides the lens, tint and window //$.fancyboxPlus(ez.getGalleryList()); return false; }); }); </script>Please adivse
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.
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?
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
For the lens border the configuration page shows lensBorder
when it should be lensBorderSize
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.
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.
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 ?
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.
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 would be nice to have docs updated.
There are handy options like:
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.
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.
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.
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.
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?
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
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!
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?
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...
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?
When we changed the image, clicking on the thumb, the tag
source: elevateweb/elevatezoom#119
line 10:
jQuery ezPlus 1.1.11
That's pretty much it. After calling .data('ezPlus').destroy()
clicks on gallery items still update zoom image.
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,
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
.
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?
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...
because I load this script on modal, so I need to destroy it when the modal is closed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.