How to Create a Magnifying Glass Effect on a Website
Giving visitors to your Web page a chance to take a closer look at an image requires a bit of behind-the-scenes image manipulation. By adding a bit of CSS, JavaScript and jQuery to the mix you can create the effect of a magnifying glass as a mouse pointer moves over an image on your page. This effect is accomplished by creating a small window that displays the background picture when the mouse pointer moves over the image displayed in the foreground.
Other People Are Reading
Instructions
-
-
1
Include JavaScript and jQuery in the “head” section of your HTML code with the statements:
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”></script>In this example, the jQuery library is located in the default HTML directory.
-
2
Insert a CDATA tag to prevent the browser’s attempts to parse jQuery operators:
<![CDATA[
-
-
3
Define the height and width variables used for displaying both images:
var W = 743;
var H = 1155;
var w = 192;
var h = 300; -
4
Set the conditions that trigger the magnification function. When called, this function replaces the mouse pointer with a circular display of the larger underlying image when the user rolls the mouse over the smaller image shown on the page. Create this event with the code:
$(document).ready(function() {
$("#myimage").mouseover(function(e) {
$(document).mousemove(myMM);
$("#glass").fadeIn('fast');
});});
-
5
Define the magnification function’s display and ending parameters. In this example, the hidden image is magnified by twice the size of the smaller image and the magnification window disappears when the mouse pointer moves out of the smaller image’s boundaries. You can do this with the code:
function myMM(e) {
var myImage = $("#myimage");
var glassImage = $("#glass-image");
var glass = $("#glass");
var xs = e.pageX - myImage.offset().left;
var ys = e.pageY - myImage.offset().top;
var bx = glassImage.width()/2 - xs*W/w;
var by = glassImage.height()/2 - ys*H/h;
glass.css("left",e.pageX-75-89+"px").css("top",e.pageY-75-10+"px");
glassImage.css("background-position",bx+"px "+by+"px");
if (bx<-W || by<-H || bx>150 || by>150) {
myImage.unbind('mousemove',myMM);
glass.fadeOut('fast');
}
} -
6
Close the jQuery script and CDATA parser exclusion with the statements:
// ]]>
</script> -
7
Set your CSS page layout to position the larger background image and magnification window limits with the code:
<style type="text/css">
#monaimage {
margin-left: 200px;
}
#glass {
background-repeat:no-repeat;
background-position:top left;
width:250px;
height:170px;
padding-top:10px;
padding-left:89px;
margin:0;
position:absolute;
display:none;
}
#glass-image {
background-image:url('myImageLarge.jpg');
width:150px;
height:150px;
border-radius: 75px;
-moz-border-radius: 75px;
background-repeat:no-repeat;
background-color:#fff;
margin:0;
padding:0;
cursor:none;
}
</style>
</head> -
8
Write the HTML code to display your page in the “body” section:
<body>
<p>Move mouse over the image</p>
<img id="myimage" title="Magnification Example" src="myimageSmall.jpg" alt="The Big Picture" />
<div id="glass"><div id="glass-image"></div></div></body>
</html>
-
1
Tips & Warnings
This code relies on CSS3 to create a round magnification field and may not work on older browsers. For backward compatibility with older CSS implementations, define a rectangular field for “#glass-image.”
Without the CDATA tags, browsers try to parse the less than “<” and greater than “>” operators as HTML tags. Always surround JavaScript and jQuery operators with the CDATA tags to prevent script failure.
References
Resources
- Photo Credit Brand X Pictures/Brand X Pictures/Getty Images
