Have you ever want to add a super cool effect to your site of product images and couldn’t find a perfect match? I bet these magnifying glass effect should fits in any layout. These magnifying glass is created using CSS3 box-shadow and border-radius properties. jQuery is used to position it at the cursor coordinates and change the background position accordingly. Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state. The idea of this post is generated from the walkthrough of Thecodeplayer.
Read through every attribution for better understanding of what operation each line performed.
- Use the class magniflier to enable the effect on any image.
- Attach data-large=”image.jpg” to the HTML markup if you want to use different image for the zoomed version.
Now you have a simple-to-use magnifying glass plugin for your next project. Feel free to use it and share any improvements that you make with us.
Table of Contents
Features:
1.) CSS3 code added.
2.) JQuery and JavaScript
4.) Image will be zoom on mouse hover.
5.) Zooming effect will be smooth.
6.) Image will be zoom in an magnifying glass.
7.) Can add unlimited image in a web page.
jQuery And CSS3 Magnifying Glass To Zoom Images?
Step 1:) First of all add the below code in between <head></head> section to your web page.
<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
/*
* jQuery And CSS3 Magnifying Glass
* Written by Alen Grakalic
* Shared At: https://www.exeideas.com/2015/07/magnifying-zoom-glass-for-images
*
* Built for jQuery library
* http://jquery.com
*
*/
$(function() {
var native_width = 0;
var native_height = 0;
var mouse = {x: 0, y: 0};
var magnify;
var cur_img;
var ui = {
magniflier: $('.magniflier')
};
// Add the magnifying glass
if (ui.magniflier.length) {
var div = document.createElement('div');
div.setAttribute('class', 'glass');
ui.glass = $(div);
$('body').append(div);
}
// All the magnifying will happen on "mousemove"
var mouseMove = function(e) {
var $el = $(this);
// Container offset relative to document
var magnify_offset = cur_img.offset();
// Mouse position relative to container
// pageX/pageY - container's offsetLeft/offetTop
mouse.x = e.pageX - magnify_offset.left;
mouse.y = e.pageY - magnify_offset.top;
// The Magnifying glass should only show up when the mouse is inside
// It is important to note that attaching mouseout and then hiding
// the glass wont work cuz mouse will never be out due to the glass
// being inside the parent and having a higher z-index (positioned above)
if (
mouse.x < cur_img.width() &&
mouse.y < cur_img.height() &&
mouse.x > 0 &&
mouse.y > 0
) {
magnify(e);
}
else {
ui.glass.fadeOut(100);
}
return;
};
var magnify = function(e) {
// The background position of div.glass will be
// changed according to the position
// of the mouse over the img.magniflier
//
// So we will get the ratio of the pixel
// under the mouse with respect
// to the image and use that to position the
// large image inside the magnifying glass
var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
var bg_pos = rx + "px " + ry + "px";
// Calculate pos for magnifying glass
//
// Easy Logic: Deduct half of width/height
// from mouse pos.
// var glass_left = mouse.x - ui.glass.width() / 2;
// var glass_top = mouse.y - ui.glass.height() / 2;
var glass_left = e.pageX - ui.glass.width() / 2;
var glass_top = e.pageY - ui.glass.height() / 2;
//console.log(glass_left, glass_top, bg_pos)
// Now, if you hover on the image, you should
// see the magnifying glass in action
ui.glass.css({
left: glass_left,
top: glass_top,
backgroundPosition: bg_pos
});
return;
};
$('.magniflier').on('mousemove', function() {
ui.glass.fadeIn(100);
cur_img = $(this);
var large_img_loaded = cur_img.data('large-img-loaded');
var src = cur_img.data('large') || cur_img.attr('src');
// Set large-img-loaded to true
// cur_img.data('large-img-loaded', true)
if (src) {
ui.glass.css({
'background-image': 'url(' + src + ')',
'background-repeat': 'no-repeat'
});
}
// 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) {
if (!cur_img.data('native_width')) {
// 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.onload = function() {
// 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;
cur_img.data('native_width', native_width);
cur_img.data('native_height', native_height);
//console.log(native_width, native_height);
mouseMove.apply(this, arguments);
ui.glass.on('mousemove', mouseMove);
};
image_object.src = src;
return;
} else {
native_width = cur_img.data('native_width');
native_height = cur_img.data('native_height');
}
//}
//console.log(native_width, native_height);
mouseMove.apply(this, arguments);
ui.glass.on('mousemove', mouseMove);
});
ui.glass.on('mouseout', function() {
ui.glass.off('mousemove', mouseMove);
});
});
</script>
<style type="text/css">
.glass {
width: 170px;
height: 170px;
position: absolute;
border-radius: 50%;
cursor: crosshair;
/* Multiple box shadows to achieve the glass effect */
box-shadow:
0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/* hide the glass by default */
display: none;
}
.magnifying {
margin: 50px auto;
text-align: center;
padding: 20px;
border: none!important;
}
</style>Step 2.) Now add the below code where you want to put the zoomable image again and again.
<div class="magnifying">
<img class="magniflier" src="http://3.bp.blogspot.com/-5FGIWLbNRko/UsVnA0VLYhI/AAAAAAAAHDU/vkrBanhvho0/s1600/jQuery+Magnifying+Glass+for+Images.png" width="160" />
</div>Step 3.) Save and Done.
Customization:
You have to just change the width according to your desired image DIV. Rest you can also change CSS class as per your pre added images…
Last Words:
This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share alot more about coding and make it easy for you. If you liked it then share it and be with us to get next awesome widget. If you have any problem then feel free to ask us. We will help you with what we can or have.
Be the first to write a comment.