Skip to content

Instantly share code, notes, and snippets.

@aaryan79831014

aaryan79831014/ImageMagnifier

Last active March 26, 2018 19:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaryan79831014/cbc475b5be33ddb9dde4ec6cbc8ee240 to your computer and use it in GitHub Desktop.
Save aaryan79831014/cbc475b5be33ddb9dde4ec6cbc8ee240 to your computer and use it in GitHub Desktop.
Download ZIP
Image Magnifier with single image
Raw
ImageMagnifier
<html lang="en-US" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "ready!" );
var isMobile = window.matchMedia("only screen and (max-width: 760px)");
console.log("isMobile : " + isMobile.matches );
var px;
var py;
$(".boxImg").mouseenter(function () {
console.log($(this).attr("src"));
$("#zoombox").css({ "background": "url('" + $(this).attr("src") + "') no-repeat" });
$("#zoombox").css({ "background-size": $(this).width() + "px " + $(this).height() + "px" });
}).mouseleave(function () {
$("#zoombox").hide();
//var tg = $("#zoombox").css("background-image");
px = 0;
py = 0;
})
$(".boxImg").mousemove(function (p) {
console.log('On mouse move');
if (px == 0) {
$("#zoombox").fadeIn(200);
}
px = p.pageX - $("#zoombox").height() / 2;
py = p.pageY - $("#zoombox").width() / 2;
$("#zoombox").css({ "top": py + "px", "left": px + "px", "position": "absolute" });
var my = p.pageY - ($(this).offset().top + $("#zoombox").height() / 4);
var mx = p.pageX - ($(this).offset().left + $("#zoombox").width() / 4);
var coord = "-" + mx + "px " + " -" + my + "px";
$("#zoombox").css({ "background-position": coord });
})
});
</script>
<style>
#zoombox{
display:none;
position:absolute;
border:1px solid rgba(255, 255, 255, 0.72);
top:25%;
left:25%;
z-index:5;
height:100px;
width:100px;
/* border-radius:100px; */
pointer-events:none;
transform:scale(1.5);
};
</style>
</head>
<body>
<div>
<img class="boxImg" src="./image1.jpg" alt="">
<div id="zoombox">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment