• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 84
  • Last Modified:

jQuery: Enlarge portion of image being hovered over

I want the enlarged image to display the portion of the image that is being moused-over.

In this code, the enlarged image does not correspond to the hover.

https://jsfiddle.net/yqrvmszx/

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">

#img {
margin: 10px auto;
border: 0;
width: 400px;
display: block;
cursor: crosshair;
}

#imageLarge {
margin: 100px auto;
border: 1px solid #111;
width: 300px;
height: 350px;
background: #888 url('http://www.adas.uk/Portals/0/EasyDNNnews/102/102GreatCrestedNewt.jpg') no-repeat scroll 0 0;
}

</style>

<script type="text/javascript">
$(document).ready(function() {

 $('#img').mousemove(function( event ) {
  $('#imageLarge').css('background-position', ((event.pageX-$(this).position().left) / $(this).width() * 100) + '% ' + ((event.pageY-$(this).position().top) / $(this).height() * 100) + '% ');
 });
});

</script>
</head>
<body>
 <img src="http://www.adas.uk/Portals/0/EasyDNNnews/102/102GreatCrestedNewt.jpg" id="img" alt="" />
 <div id="imageLarge"></div>
</body>
</html>

Open in new window

0
skij
Asked:
skij
  • 3
1 Solution
 
Eddie ShipmanAll-around developerCommented:
Why reinvent the wheel?

Try one of the jQuery image zoom plugins:
https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=jquery%20image%20zoom
0
 
skijAuthor Commented:
That plugin is 1790 lines long!  Why use a 60kb plugin when you could accomplish the same think with less than 10 lines of code?
1
 
Eddie ShipmanAll-around developerCommented:
Well, it looks to me like your calculations are incorrect. I believe you should also be using screenX and screenY vs. pageX and pageY.
0
 
Julian HansenCommented:
Try using offset instead of position
$(document).ready(function() {
 $('#img').mousemove(function( event ) {
  $('#imageLarge').css('background-position', ((event.pageX-$(this).offset().left) / $(this).width() * 100) + '% ' + ((event.pageY-$(this).offset().top) / $(this).height() * 100) + '% ');
 });
});

Open in new window

0
 
Eddie ShipmanAll-around developerCommented:
Julian should get the points.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now