Hi,

I have used your library and I must say it is awesome and really neat. But there is one issue. Basically not a technical issue just consider it as a new feature request.

Right now Magnifier.js is working on showing original image as thumbnail and then displaying original image and setting background property using JavaScript. This is perfectly valid. But there are some situations in which I want to show users the original image in it's original form and then giving some zooming ability. I think Magnifier.js will not help me in this.

Please! take a look at my library http://i8ecoders.com/my_image_zoomer/ which is showing zoomed version of original image in HTML5 Canvas. It is not perfect but I can make it working 100% fine within 01 hour max.

Is their any chance that we can integrate my library after perfecting it up with your library for the above said effect. I was aiming to launch this as a jQuery Plugin but didn't get time but I really like your Library and I would love to hear your thoughts.

Looking forward to hear from you.

Thanks.

Hi! I've found a possible bug: onthumbleave keeps firing forever outside the thumb. Not initially, but after an onthumbenter event.

I think it's simply not fully controlled by the relative function (row 550). It should fire once.

You can see by simply plug a log on your last demo.

Regards

Love this JS plugin btw!

When I enabled the zoomable boolean, I found myself zooming in indefinitely. I added a zoomMax option so that there is a hard limit in how much I can zoom in. Also while I was at it, I added a zoomMin option so that both zoom boundaries can be defined.

I'm initializing Magnifier.js like this:

var evt = new Event(),
m = new Magnifier(evt);
m.attach({
    thumb: '.slide-thumb',
    largeWrapper : 'zoomy'
});

This is my HTML markup:

<a href="path-to-image.jpg" class="magnifier-thumb-wrapper">
   <img class="slide-thumb" src="path-to-image.thumb.jpg" data-large-img-url="path-to-image.jpg" alt="xxxx" itemprop="image">
</a>
<div id="zoomy" class="magnifier-preview" style="width: 200px; height: 133px;border:1px solid;"></div>

And all I get is this error: Uncaught TypeError: Cannot read property 'id' of undefined - magnifier.js line 41. Inspecting that line, it seems as magnifier expects a DOM object and not anid` of the node as it seems to be suggested in documentation (and as done in demo).

To fix it I got change line 41 to:

largeWrapperId: gOptions.largeWrapper? (gOptions.largeWrapper.id || null):null,

So now even if you don't pass options to Magnifier constructor it won't fail.

Change function name so that it no longer conflicts with Bootstrap5 (causing Navbar to stop working). Note: magnifier's initialisation should change accordingly, i.e. let evt = new Magnifier_event(); let m = new Magnifier(evt); m.attach(...); ...

The image of the lens setted as the lens background-image seems to distort due to css classes at image to be sized.

Image seems to work properly if thus classes is removed (as well as the css properties of the class) as the image uses the real width x height of the file (overflows from red border-box line)

The code :

var evt = new Event(), m = new Magnifier(evt, { thumb: '#img', mode: 'inside', zoom: 3, zoomable: true });

doesn't seem to work on the images I have defined inside my template even when I have called the Magnifier.js and event.js along with the css file as well. Please can someone help?

@mark-rolich I'm still getting caught up so I'm not sure if this is already implemented and not documented or if its a feature that wasn't considered at the time. But is there, or will there be, a way to resize the lens for people who chose to use the mode: inside? I'd like to use it as the code is clean and simple to implement, but the viewport on the lens is nowhere near large enough for what I wish to use it for.

The other consideration I've given to the situation is that the viewport is proportional to the large image being used, at which point one would need an inefficiently large image to make the viewport worth using on mode: inside.

Is this project still being supported?

Thank you for your time and response.

Excuse me for the translator...

If you move the cursor from bottom or from right to the center. Then reaching the middle of the lens size, the lens will return back down by 1 pixel or to the right by 1 pixel. The cursor is drawn from the bottom to the top, or tight to left.

I really liked your lens, I want to use it, but this jump is annoying