"loop"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="magnify"> <!-- This is the large magnifying class which holds the large version of the image--> <div class="large"></div> <!-- This is the small image --> <img src="http://placepu.gs/300/300" width="200" class="original"/> </div> <script> $(document).ready(function(){ var native_width = 0; var native_height = 0; //Now the mousemove function $(".magnify").mousemove(function(e){ //When the user hovers on the image, the script will first calculate //the native dimensions if they don't exist. Only after the native dimensions //are available, the script will show the zoomed version. if(!native_width && !native_height) { //This will create a new image object with the same image as that in .small //We cannot directly get the dimensions from .small because of the //width specified to 200px in the html. To get the actual dimensions we have //created this image object. var image_object = new Image(); image_object.src = $(".original").attr("src"); //This code is wrapped in the .load function which is important. //width and height of the object would return 0 if accessed before //the image gets loaded. native_width = image_object.width; native_height = image_object.height; } else { //x/y coordinates of the mouse //This is the position of .magnify with respect to the document. var magnify_offset = $(this).offset(); //We will deduct the positions of .magnify from the mouse positions with //respect to the document to get the mouse positions with respect to the //container(.magnify) var mx = e.pageX - magnify_offset.left; var my = e.pageY - magnify_offset.top; //Finally the code to fade out the glass if the mouse is outside the container if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { $(".large").fadeIn(100); } else { $(".large").fadeOut(100); } if($(".large").is(":visible")) { //The background position of .large will be changed according to the position //of the mouse over the .small image. So we will get the ratio of the pixel //under the mouse pointer with respect to the image and use that to position the //large image inside the magnifying glass var rx = Math.round(mx/$(".original").width()*native_width - $(".large").width()/2)*-1; var ry = Math.round(my/$(".original").height()*native_height - $(".large").height()/2)*-1; var bgp = rx + "px " + ry + "px"; //Time to move the magnifying glass with the mouse var px = mx - $(".large").width()/2; var py = my - $(".large").height()/2; //Now the glass moves with the mouse //The logic is to deduct half of the glass's width and height from the //mouse coordinates to place it with its center at the mouse coordinates //If you hover on the image now, you should see the magnifying glass in action $(".large").css({left: px, top: py, backgroundPosition: bgp}); } } }); }); </script>
.magnify { width: 200px; margin: 50px auto; position: relative; } .large{ cursor: crosshair; position: absolute; height: 175px; width: 175px; background-image: url('http://placepu.gs/300/300'); background-repeat: no-repeat; box-shadow: 0 0 0 7px rgba(255,255,255,0.8), 0 0 7px 7px rgba(0,0,0,0.25), inset 0 0 40px; border-radius: 50%; }

Related: See More


Questions / Comments: