jQuery plugin for zooming images on mouseover.

Hi can you take a look here: http://openbci.com/index.php/gettingstarted

Only the picture at the bottom of the page will zoom.

I checked in the console and Zoom shows up on every element.

At first I thought it was because the last picture was the only .jpg and all the rest are .png, but I changed one of the others to .jpg and still no zoom.

Thanks for any help.

When I run the

$('#example').trigger('zoom.destroy');

on any element e.g.:

$('#button').click('zoom.destroy');

I get the following error:

Uncaught TypeError: ((jQuery.event.special[handleObj.origType] || (intermediate value)).handle || handleObj.handler).apply is not a function(…)

Hi there. Nice plugin. I fixed an error on IE8 real quick for you with this patch. I will send you a link to my site when it launches - your plugin works really well. Thanks.

I have a Marionette function that is called every time a user changes product color. This will enable the zoom of that product color image as well as other locations of that color. In this case, every time I apply a zoom, the zoom applies exponentially. The destroy trigger seems to only destroy the img that it is created once so I tried using $.remove().

this.ui.current_image.find('.js-zoomable-image').each(function(){
        var $this = $(this);
        var url = $this.data('large-url');
        $this.find('img.zoomImg').remove();
        $this.zoom({ url: url, touch:touch_val });
      });

I figured that every time this function is going to be called, I could remove all the original zooms and then reapply it. However it will start with 2, 4, 6, 12, etc..

What am I doing incorrectly?

Hi, the jZoom is working flawless on a single picture but as soon as I change the SRC and re-call the zoom then the pictures just moves a little bit when I hover with my mouse over it, but it does not zoom in.

I tried every solution I found on GIT and the internet but nothing worked for me so far. I hope you, or anyone else who reads this can help me out.

The javascript that I wrote and the container in which the image rests:

<div class="product-details-images">
    <div class="product-details-images_big bigImage" data-image="<?php echo $mainimg?>">
        <a href="<?php echo $g_oProduct->ImageName(3,$alt);?>" title="<?php echo $g_oProduct->Title();?>">
            <img src="<?php echo $mainimg?>" alt="<?php echo $alt_text; ?>" height="400" height="800" itemprop="image" />
        </a>
    </div>    
</div>

The zoom works on mobiles and touch event, although there is one slight issue ( minor feature request? ;) which I feel would make it more user friendly. The problem is that the zoom stays "zoomed" even after I've finished touching the mobile. It would be much nicer if the image had zoomed back out to the original state, so that it can be zoomed again easily, while currently it requires two touches to zoom again.

Accessibility validation tools will report an error because the zoomed image created does not contain a required alt attribute. I've set it to an empty string.

Target option was broken.

target: 'selector'

On some places it was used as jQuery object $(selector), and on some places as DOM element selector.style - bug, selector is string, it can't be used like this.

Fixed by changing all to jQuery object.

Target is working fine now.

Thanks, Dragan

I see that you (or someone) have hosted files on jsDelivr CDN I don't see any installation instructions anywhere, so I'm not sure if they are needed. If that file is needed, I would assume that it would be included inside the JavaScript file to reduce HTTP requests.

I'm using the exact setup referenced here http://flexslider.woothemes.com/thumbnail-slider.html

I call zoom on ".flex-active-slide". It works on first load but when the image changes the zoom function doesn't

I was unfamiliar with the document binding syntax that you were using. $(document)mousemove;

Is there benefit to this syntax that I'm missing out on by using jQuery's .on() or .bind/delegate/live methods? Or is it just an alternative syntax?

Great work, loved how easy it was to read and customize!

Hi Jack i've been trying to use in Angular but im having an issue with events and zooming. I get an error every time i mouse over it

ERROR TypeError: $img.stop is not a function at HTMLDivElement.stop (jquery.zoom.js:121) at HTMLDivElement.handle (jquery.slim.min.js:2) at HTMLDivElement.dispatch (jquery.slim.min.js:2) at HTMLDivElement.v.handle (jquery.slim.min.js:2) at ZoneDelegate.invokeTask (zone-evergreen.js:406) at Object.onInvokeTask (core.js:28521) at ZoneDelegate.invokeTask (zone-evergreen.js:405) at Zone.runTask (zone-evergreen.js:178) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:487) at invokeTask (zone-evergreen.js:1600)

And core.js:6157 ERROR TypeError: $img.stop is not a function at HTMLDivElement.start (jquery.zoom.js:130) at HTMLDivElement.handle (jquery.slim.min.js:2) at HTMLDivElement.dispatch (jquery.slim.min.js:2) at HTMLDivElement.v.handle (jquery.slim.min.js:2) at ZoneDelegate.invokeTask (zone-evergreen.js:406) at Object.onInvokeTask (core.js:28521) at ZoneDelegate.invokeTask (zone-evergreen.js:405) at Zone.runTask (zone-evergreen.js:178) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:487) at invokeTask (zone-evergreen.js:1600)

I already imported jquery in angular and also the plugin.

This is the way i use it. //Component.ts ngOnInit(): void { jQuery(document).ready(function($){ ( $('#ex1') as any) .zoom(); });

How would you show a smaller image on top of the preview image after zooming in? Would I need to programmatically combine them first into a single image before showing it?

import $ from "jquery";
import "jquery-zoom";

i am importing package then i get this error: Cannot set property 'zoom' of undefined. what can i do?

Hi! I see that this has been filed previously (#134 ) - but it's pretty crucial (for me at least) to solve, as I'm being sued for accessibility non-compliance (my site uses Shopify, Shopify's theme uses this plugin).

https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js#L92

Seems like the plugin creates a new image element based off the source. Can we get the plugin to copy over the alt text?