search

CSS-Tricks / AnythingZoomer

Zoom in on images or content
https://css-tricks.github.io/AnythingZoomer/
MIT License
207 stars 45 forks source link

Cloned Image Offset #34

Closed willypowwow closed 8 years ago

willypowwow commented 8 years ago

I'm using the Clone option with the Large image being a scaled up version of the small image. I do this by applying a Transform (1.25) on the Large class.

The problem is that the image within the 'magnifier' window is far offset of the image underneath. I would prefer the magnifier show the section of the image which is approximately below the enlarged overlay. Is this possible?

Mottie commented 8 years ago

Hi @willypowwow!

Yeah, the plugin is set up to use the image width and height, so using a zoom will work, but the mouse won't line up. The way to get it to work is to set the width and height dimensions of the large image - demo

<div id="zoom">
  <div class="small">
    <img src="https://css-tricks.github.io/AnythingZoomer/demo/rushmore_small.jpg" alt="small rushmore">
  </div>
</div>
$("#zoom").anythingZoomer({
  clone: true
});
willypowwow commented 8 years ago

Thanks for the quick reply. I switched to width/height and all is well.

Mottie commented 8 years ago

Awesome!