payalord/xzoom

jQuery Zoom Gallery plugin

Hi there 👋

xzoom's Issues

Cache the image after first time loading

Hi,
First of all thanks for sharing your useful code to public.

Now its actually needed a feature .

When you hove over big image container for zoom it generates request for preview image.
I want it to be like this load image only for first time then cache the image for again user interaction with same image.

Thanks

Keyboard navigation

XZoom would be awesome if we could ad a keyboard navigation with -> and <-

@payalord XZoom is a really great library that I will use for an e-commerce website.
Feel free publishing (or sending me [email protected]) your bitcoin address for a donation.

Re-binding a gallery after ajax call

Hey, it's me again, I was wondering how can I re create the xzoom gallery. I've managed to bind the main xzoom viewer but for some reason the thumbnails doesn't work. Let me ellaborate the case:

• Initial state: 5 thumbs / viewer / zoom -> OK

• AJAX call: I delete the old thumbs and create others through JS -> seems ok as the new thumbnails appears and the viewer chages the image as well

• Try to reload the xzoom thumbnails -> error, the thumbnails now behaves like a normal anchor and Uncaught TypeError: Cannot read property 'xappend' of undefined it's thrown

I'm using the same init syntax:

var instance = $('.xzoom').xzoom({
                    position: 'inside'
                }); //<-- your options here

$('.xzoom-gallery').each(function () {
    instance.xappend($(this));
});

Right now I have no idea on how to re create completely the gallery, specifically the thumbnails. Thank you for your help

Destroying and reinitialising xZoom instance with new images

I am using xZoom as a product image slider.

When certain buttons on my interface are clicked I need my xZoom slider to dynamically update the slider, removing old images and adding new images when necessary.

For example:
There are 2 red product images and 3 blue product images.

Slider has 2 images of red products loaded.
If I click on the "Blue" button I need the red image slides to be updated/removed and 3 new blue image slides to be added.

I have tried to trigger your destroy method by accessing the slide instance and running the function:

instance = $(".xzoom, .xzoom-gallery").data("xzoom"); 
instance.destroy();

However the slider still continues to function.

What is the best method to destroy and/or update the slider with the new images in the cleanest way possible?

Thanks for your time, this is a great plugin!

Uncaught error

Hey
I am runing into this error on mobile but it works fine on desktop
Uncaught TypeError: $(...).hammer is not a function
at HTMLImageElement. (setup.js:21)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at HTMLDocument. (setup.js:19)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)
(anonymous) @ setup.js:21
each @ jquery.min.js:2
each @ jquery.min.js:2
(anonymous) @ setup.js:19
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2
here is a link http://urbanbrains.co.za/evesport/product_page.html

Embed videos instead of images

Hey! I'm using the plugin and checking the showcases and I was wondering if it's possible to embed videos, example using a plain icon thumbnail and instead of opening the preview/zoom it should display a videos in a default HTML player. I don't if it's possible but I was wondering if you had thought in something similar while creating this. Any comment is appreciated, thank you and great work here!

Thumbnail on hover

New with jQuery and Javascript. I'm trying to implement xzoom-thumbs on hover (rather than thumbs click), similar to this:
For example: http://52.88.132.26/DB/Artikulli.php?id=341

$(document).ready(function(){ $('.xzoom-thumbs img').hover(function() { var url = $(this).attr('src'); $('#xzoom-default').attr('src', url); }); });

You see while hovering over thumbs, the original image updates to the corresponding thumb item. However, not the xzoom-preview. In this case, in order for xzoom to work properly I have to click in thumbs, which is not what I want.

Neither this didn't work:
$(document).ready(function(){ $('.xzoom-thumbs img').on('click hover',function(){ $('#xpreview').attr('src',$(this).attr('src')); }); });

Nor this:
$(document).ready(function(){ $('.xzoom-thumbs img').hover(function() { var url = $(this).attr('src'); $('#xzoom-default').attr('src', url); $('.xzoom-thumbs img').trigger('click'); }); });

Am I missing something in the script?

Thanks.

Touch move instead of click on mobile devices

Actually it is not an issue, but a usability problem. Can't we move big image while user drags lens on a preview? Now you must point-and-click inside a small preview to move a bit to the sides to view more of it, and you won't do it from the first try. I use "inside" setting and my preview is a click area, so users can't see where they need to click for viewing what they want. I think it should be like we move mouse cursor now on a desktop.

Thank you.

Is it a must to put the thumbs after the xzoom

I have put the xzoom-thumbs first.
then I put the main xzoom image
but the script zooms on the first thumb! rather the xzoom main image

Smooth options dependent on each other and zero value bug

Need to remove dependency of smooth options from each other. Setting value zero on one of them must not affect other smooth functionality.

Plus to this. Zero value is acceptable value. Need to fix any issues if present, regard zero value, on smooth and other options where it is available to use zero values.

issue about all images

Hi sir,
How can apply for all images..

Zoom for each product

Hello!
Is it possible to show img class="xzoom" multiple times?
Here, I want to zoom each products something like this:
img class="xzoom" src="1.jpg" xoriginal="gallery/original/1.jpg"
img class="xzoom" src="2.jpg" xoriginal="gallery/original/2.jpg"
img class="xzoom" src="3.jpg" xoriginal="gallery/original/3jpg"
img class="xzoom" src="4.jpg" xoriginal="gallery/original/4.jpg"

The problem is that I can only zoom the first product image, other products images keep frozen (no zoom or anything)!
Mabybe do I need to write some javascript or some ID for each xzoom class? Please help,

Thanks :)

Fancybox 3 integration bug

Hi,
First of all thank you for sharing this excelent jquery pluggin.

I've been testing it today, and have set it up just right, but when i use Fancybox integration using version 3, it displays the path and name of the picture instead of the actual picture... Using Fancybox 2.0.5 it works as intended (the only issue with version 2 is losing the white border for some reason).

You can see that behavior in this URL on the "With Fancy Box" section: http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/ (that page uses Fancybox version 3.0.47)

Is this a xZoom or a Fancybox 3 bug?

Thanks in advanced,
Jorge Chaves

Left and Top positions wrong with custom width and height

In case when used left or top positions for zoom with custom width and height - those initial positions are wrong.

Fullscreen mode for mobile devices

Option to choose between output from inside to fullscreen for any responsive output (which usually happens on mobile devices).

Right now xZoom already have this feature, but it is not completed yet. And undocumented. Option is mposition - that can have values:

• inside (default)
• fullscreen

Need to complete this in next version.

Sometimes on target image mouseleave lens won't hide.

Sometimes on target image mouseleave event - lens won't hide. Or zoom not closed by some reason probably.

Can i use original image for thumbnail and for the preview?

$('.xzoom').css('width','350px');

i use that code for resize the default width of the image because i don't want use many image, but i got a problem when i click the thumbnail for change the preview when i do that width of the preview became normal not 350px.

Cant scroll past main image on mobile

Greetings..

I'm using the lens position setting and the hammer.js integration from your demo. My gallery is at the top of the page. When the page loads on mobile, there is no way to access the content under the gallery without scrolling through the gallery, but scrolling through the main image doesn't work. The only way to scroll past the gallery is to use the 5px of non-image space on either side of the image.

You can see the issue by checking out your own demos here: https://payalord.github.io/xZoom/ On your site, the galleries are not at the top of the page, so you can sort of "get a running start" and scroll right past them, but if you stop scrolling just above one of your galleries and then try to get going again withe the lead image being the first point of contact, then you should see the issue.

I'm testing on Android 5 btw, if it matters...

Any advice?

Thanks!

Mobile / Tablet device rotation

Zooming into images via an Ipad or Iphone works just fine, however if user changes their viewport from portrait to landscape (rotating their device) the zoom container doesn't disappear and fixes itself to the screen unless user some how changes the image in the gallery. Is there a way to prevent this?

xZoom in Angular 5

I was trying to implement xzoom in angular 5. Is there a way to implement in angular 5? I tried to add but was not successful.

xzoom issue in ipad

Iam getting following errors in ipad . i have added hammer.js
xzoom.eventunbind();
Uncaught TypeError: Cannot read property 'eventunbind' of undefined

jQ(this).hammer().on("tap", function(event) {
Uncaught TypeError: jQ(...).hammer is not a function

https://sav.dotcomweavers.net/sportex-ar4145.html

can you help me on this.

IE10 Lens glitch

This only happens on IE10 and lower, I'm using Windows 10, IE11 internet browser emulating IE10. This could be an emulation issue as it seems to fine on Windows 7 IE10 (virtual box).

The lens breaks out of image container. The zoomed image is also reversed in it's controls, so you have to scroll zoom backwards to see the zoomed image, which seems to be the lower res image not the high res image.

I don't think this is a CSS issue from what I can tell.

If you could help or shine some light on the problem, I would be very grateful.

Navigation without thumbnail

Is it possible to have next and previous navigation buttons without displaying the thumbnails?

Mouseenter / Mouseleave Detection

xZoom v1.0.8

I've been reading the manual for a good while now and have been trying to detect when my mouse has entered the zoom container and when my mouse has left.

     var instance = $('#main_image, .xzoom-gallery').xzoom({
            tint: '#333',
            adaptive: false,
            smoothZoomMove: 0,
            smoothLensMove: 0,
            smoothScale: 0,
            hover: true,
            title: true,
            defaultScale: 0
        });

This is my variable for instance.

//Example
instance.eventopen = function(element) {
  element.bind('mouseenter', instance.openzoom);
console.log('Entered');
}

This code above actually doesn't work and nothing is being returned to my console.

instance.eventleave = function(element) {
  element.bind('mouseleave', instance.closezoom);
console.log('Leaving');
}

This code above works, but only when the mouse enters the zoomed image, but not when leaving which is weird as it feels reversed.

I can't seem to work out how I can detect mouse enter and leave when zooming. I need images on my webpage to hide while I'm using xZoom and then reappear when I'm not using xZoom.

It's not working with Fancybox 3.3.5

Prevent over zoom beyond image natural size

Another nice config option would be a preventOverZoom (true/false) flag. Currently it is possible to zoom beyond the bounds of the full size image's resolution, thus creating distortion.

It appears within the xscale method... you could check the natural dimensions of the image and prevent zooming beyond those bounds.

jQuery.fn.extend({
    //IE 11 and below safe way to get the natural dimensions
    getNaturalDimensions: function () {
        if (this.length === 0) {
            return null;
        }

        var img = this[0];

        //Modern browsers
        if ('naturalWidth' in img) {
            return { width: img.naturalWidth, height: img.naturalHeight };
        }

        //Older browsers
        var tempImg = new Image();
        tempImg.src = img.src;
        return { width: tempImg.width, height: tempImg.height };
    }
});

Put the "transparent blue" as a JSON parameter

When the mouse hovers the image, there is a "transparent blue" on the picture.
I will change it for my own brand for a green, but I suppose I will be not the only one changing it.

How would I integrate xZoom with an existing slider?

For example, Slick Carousel.

Is my best bet to just make a separate xZoom gallery per image?

Multiple Galleries

Could you point me in the right direction?

I want to have multiple galleries per product and load them based on the value change of a select dropdown. I was thinking of just loading up 3 instances of xZoom, hiding two of them with CSS, and then changing the value CSS display value according as the user interacts with the select dropdown.

What would you recommend in terms of a strategy with your plugin?

Videos / Iframe

I'm aware that xZoom is for zooming into images, but is possible to use xZoom to pull in a video source and display it in the main image section? I'm currently using the gallery and when selecting a gallery thumb nail image I want to pull video which I can play (not zoom of course).

<!-- main image source -->
<img class="xzoom" id="main_image" src="mid-image.jpg" xoriginal="high-image.jpg">

<!-- normal thumbnail image in gallery -->
<div><a href="high-image.jpg"><img class="xzoom-gallery" src="low-image.jpg" xpreview="preview-image.jpg"></a></div>

<!-- Youtube source to be displayed in main image source -->
<div><a href="youtube-link"><iframe class="xzoom-gallery" src="thumb-nail.jpg"></a></div>

This is just an idea above, but if it isn't possible, please feel free to just close this issue.

is it necessary to have all the three folders

Hello;

thank you very much for this great work. I`m trying to implement this code and I faced the issue of having to have originals, previews and thumbs folders. what I wanna do is to have only one folder for the originals. is that possible? thanks in advance.

Position: 'lens' not working...

I can't get Position: 'lens' to work. I thought it was me, so I checked out your "Lens options" demo here: https://payalord.github.io/xZoom/ and it doesn't work (for me) on your site either. I've tried the latest versions of FF and Chrome on Win10. Please advise.

xzoom is not a function

when i import this plugin into an angular project using the following syntax

import 'xzoom';

the console showing xzoom is not a function.

any idea to use xzoom in an angular project.
Is this plugin ok to use with webpack?

Thank you

Problem with touch screen devices

I've integrated this plugin in my web app and it's working fine in desktop, but issue occurred while doing the same with touch devices. How can I integrate this plugin with touchscreen device, Please help me regarding same?

Mouse Scroll Zooming - Configurable Rate

Currently the mouse scroll zoom is hard-coded at 5%. Can you make that a configurable value per instance?

Thanks!

Firefox lens motion problem

css() function returns NaN instead of 0 on css('padding-top') etc. Which brings error on some part of calculation in top and left position of lens object. And we experience that in Firefox lens stands on top left corner without any move. While it must to move.

Absolutely reverse situation with Google Chrome where css() function returns 0 instead of NaN. And no problem in calculation of top and left position of lens.

Lens size

Hi, I was looking for an option which let me set the size of the lens. Can you help me with that? Thank you!

Edge and IE problems.

This only happens on Edge, IE11, IE10 and lower. If you have an output window for zooming you'd normally get a nice border around the zoom container, instead the image you're zooming into appears twice, one is in the zoom container as normal and works fine and another is behind the zoom container removing the nice border. This doesn't always happen in Edge, however resize my browser it'll appear, as for IE11 and lower it always happens.

This only happens on Microsoft browsers.

Lens start position wrong on zoom opening

If image is loading and mouse was moved during this process ans stopped, after image loaded lens position will be on old mouse position. This is wrong need to update mouse position before show lens.

Responsive

I've notice it's only responsive if the preview container goes a certain width off the screen and then it'll position the the zoom inside the zoom container. How do I manually change the types of zoom at different screen sizes so I can decide which type of responsive zoom design I wish to use?

Different sizes of additional images breaks down zoom proportions

After first zoom initialization(first opening of zoom) somehow it is saved first image sizes and they used after that to calculate proportions for zoom other images if we switch to them. This breaks down proportions of image and lens size on output.

Need to fix this by reset old saved image sizes on opening new image in the zoom if we switch to next image.

Lens Moving Slow

When i mouse hover thumbnail image the preview image moving slowly parallel with thumb image. Can you help me on this?

Cannot read property 'pageX' of undefined

Hello,

I am trying to use closezoom and openzoom to enable and disable zoomer. But it's returning error Cannot read property 'pageX' of undefined

Add methods for custom code execution

Great plugin. Can you add some methods where I could run my custom code on initialization or image hover? I'm not talking about the events provided.

Examples: mouse over not working in Chrome and FireFox on Windows 10

On the examples... the mouse over behavior that opens zoom is not working in Chrome 65.0.3325.181 and FireFox 59.0.2 on Windows 10 desktop (multiple computers). It was working yesterday. I double-checked that it still occurs after clearing cache and opening in incognito mode.

URLs with issue:

• https://payalord.github.io/xZoom/
• https://payalord.github.io/xZoom/examples/index.html

Working in:

• IE 11
• Edge

"5" px left shift bug

By some reason, sometimes(not always, but happens on some websites) - jQuery offset function returns different values for left position of main image object, after xZoom system source element has been append to the body. source element has position:absolute style - which means that this element doesn't affect anyhow the width or height of the document to affect anyhow calculation of jQuery offset. However tests showed this is exactly what happens sometimes.

jquery version

The jquery embed link doen't work. And the latest 3.1.0 version doesn't apply showing the "Uncaught TypeError: a.indexOf is not a function" . The version 2.1.0 works.
update hopefully :)

xZoom with Magnific Popup counter always start from 1

Eventhough I click on the third thumbnail and it pops up correct image, the counter always start from 1.
This bug doesnot happen on magnific popup gallery itself.
Does anyone have any fix or update for this?

Lens error when on certain image size

In this case I use image size for preview (in src attribute) is 300x226 while image size for xoriginal attribute is 400x302

All available width of preview from right

Hello!
Is it possible to do this through the settings?
https://monosnap.com/file/tL32BikUBrlnxVFbPFQZWNPh2CCZJ2.png

This is a very small size, for buyers it is almost useless
https://monosnap.com/file/tGdvR5pptGbtYPRdvQMM1x03KcRCJ5.png