Skip to content

Instantly share code, notes, and snippets.

@noomz
Created August 30, 2013 14:21
Show Gist options
  • Save noomz/6390367 to your computer and use it in GitHub Desktop.
Save noomz/6390367 to your computer and use it in GitHub Desktop.
Image zoom
<!DOCTYPE html>
<html>
<head>
<title>x</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="x">
<div id="y">
<img id="z" src="http://bignanime.files.wordpress.com/2012/05/1245136944_1366x768_only-yesterday-by-studio-ghibli.jpeg">
<div id="lens"></div>
</div>
</div>
</body>
</html>
#y {
width: 200px;
overflow: auto;
}
#z {
max-height: 400px;
width: auto;
}
#lens {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
jQuery(document).ready(function ($) {
var img = $('#z');
var lens = $('#lens');
lens.css('background-image', 'url(' + img.attr('src') +')');
$('#y').on('mouseover, mousemove', function (e) {
var y = $('#y');
var width = lens.width();
var height = lens.height();
var posX = e.clientX + $(document).scrollLeft();
var posY = e.clientY + $(document).scrollTop();
var imgX = -1 * (posX - y.offset().left + y.scrollLeft());
var imgY = -1 * (posY - y.offset().top + y.scrollTop());
var sizeX = img.width() * 2;
var sizeY = img.height() * 2;
imgX *= 2;
imgY *= 2;
imgX += (width / 2);
imgY += (height / 2);
lens.css({
display: 'block',
top: e.clientY - (height / 2),
left: e.clientX - (width / 2),
'background-size': "" + sizeX + "px " + sizeY + "px",
'background-position': "" + imgX + "px " + imgY + "px"
});
if (posX > (y.offset().left + y.width()) || posX < y.offset().left) {
lens.hide();
}
if (posY > (y.offset().top + y.height()) || posY < y.offset().top) {
lens.hide();
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment