i-like-robots / easyzoom Goto Github PK
View Code? Open in Web Editor NEW๐ EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin.
Home Page: http://i-like-robots.github.io/EasyZoom/
License: MIT License
๐ EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin.
Home Page: http://i-like-robots.github.io/EasyZoom/
License: MIT License
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'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
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#
Look into making touch support an optional extra
It loads the image, shows the crosshairs cursor, but does use/zoom to the larger image.
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?
Shadows implemented by MS filter totally kill performance. Semi-transparent thumbnails in example also need adding.
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).
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!
Use the events touches
array to count how many fingers are on the screen and use values to write to pageX
and pageY
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.
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.
Not compatible with JQuery 1.8.3
Add option to preload full size image on init.
Make it possible to position the zoom panel over the source image. This would be suitable for larger images/ small screens
Hi, first of all thanks for this great plugin.
How to reproduce the bug I found:
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.
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:
If using a gallery the zoom must be disabled (and loading cursor displayed) while loading a source image.
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>
Listen for mousemove event to also display the panel. E.G. If users cursor is over the source image before EasyZoom loads.
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.
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:
Thanks for writting this plugin.
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");
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
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/.
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
Any way to control the speed of the zone being zoomed while going from top to bottom?
Rapid mouseover/mouseout events cause a stack of zoom panels due to variable being re-assigned to new object.
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.
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
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?
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.
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.
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.
I try this code to set zoom image show default, but it not working:
var
var api = $easyzoom.data('easyZoom');
api.show();
How to show zoom image at default?
The rel attribute is being abused to specify a source image, change it to a data attribute.
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.
Is there anyway we can limit the viewport for zoom images to a rectangle?
Teardown via the api only removes the events off the first image on the page.
@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?
Would it be possible to activate EasyZoom onClick instead of onHoover?
Thanks!
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>
@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 ....
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.
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 you please add a mask around the mouse pointer to highlight the zoomed area like amazon zoom feature?
Thanks,
Dony
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.