web

Skyer · 06-13-2013, 04:27 AM

Hello,
I'm trying to create image 'magnifier', as the one used on Amazon.
(example http://www.amazon.com/Fitbit-Wireles...ef=zg_bs_hpc_2).

I could not find it on google, and I'd also like to avoid using jquery and similar plugins if possible.

I'm not very experienced with javascript - I know it's going to involve onmouseover() and getElementById(), but I can't think of how to make just part of the image magnified - whole image would not be a problem.

Thank you for your help.

eSelix · 07-10-2013, 06:03 PM

For example:

Code:

<script>
function Zoom(aEvent)
  {
  var ZoomedImage = document.getElementById('ZommedImage');

  ZoomedImage.style.left = -(aEvent.clientX - aEvent.target.offsetLeft) * ZoomedImage.width / 50 + (300 / 2);
  ZoomedImage.style.top = -(aEvent.clientY - aEvent.target.offsetTop) * ZoomedImage.height / 50 + (300 / 2);
  }
</script>

<div style='border: 1px solid blue; width: 52px; height: 52px;'>
<img src='http://www.huntlogo.com/wp-content/uploads/2011/09/linux-logo-285x336.jpg' onmousemove='Zoom(event)' style='height: 50px; width: 50px;'>
</div>


<div style='position: relative; width: 300px; height: 300px; overflow: hidden; border: 1px solid red;'>
<img id='ZommedImage' style='position: absolute;' src='http://www.huntlogo.com/wp-content/uploads/2011/09/linux-logo.jpg'>
</div>

To "magnify" part of the image essential is external block element smaller than image with style "overflow: hidden;".

Skyer · 07-14-2013, 03:10 AM

Thank you for your answer,
I'm expecting it to be something like that, but I don't know how to 'select' just a part of the picture to be in the external block element.

devnull10 · 07-15-2013, 04:29 AM

Quote:

Originally Posted by Skyer

but I don't know how to 'select' just a part of the picture to be in the external block element.

You don't need to, you're just shifting the position of the larger image around in its container. The "overflow:hidden" deals with keeping it "in the box".

Skyer · 07-15-2013, 08:01 AM

Quote:

Originally Posted by devnull10

You don't need to, you're just shifting the position of the larger image around in its container. The "overflow:hidden" deals with keeping it "in the box".

So how do I get the position of the mouse in relation to picture, so I know how much should I shift the big one?

eSelix · 07-15-2013, 05:09 PM

Did you saw my code? There are three lines of simple javascript code to compute what you want. To get X and Y position of mouse pointer you can use "aEvent.clientX" and "aEvent.clientY" from mousemove event. Then you shift it by offset of small image and multiply by scale (ZoomedImage.width / 50) width of big image divided by width of small image, and then shift by half of big image, to move big image to center.

Skyer · 07-16-2013, 05:03 AM

Quote:

Originally Posted by eSelix

Did you saw my code? There are three lines of simple javascript code to compute what you want. To get X and Y position of mouse pointer you can use "aEvent.clientX" and "aEvent.clientY" from mousemove event. Then you shift it by offset of small image and multiply by scale (ZoomedImage.width / 50 width of big image divided by width of small image and then shift by half of big image, to move big image to center.

Whoa, for some reason, I didn't see the code at all - I thought you're just vaguely referring to the solution. Thanks, I'll check it out.