In an alternate version to the Image Magnification tool from my previous post, I have created another magnification tool which works exactly like a magnification glass moving over the picture. This tool is more concise and easy to use then the previous one where a separate popup with the same aspect ratio was used to display the image. Here the magnified image section keeps moving with the mouse providing an exact magnification glass effect. You also don’t need any separate CSS for the magnification window.
Why should you use this Image Magnification tool:
- Zero coding required.
- No CSS required at all.
- Can be triggered automatically or manually from the image.
- Works on images of any resolution or aspect ratio.
For testing I have used a very high resolution image of Taj Mahal (4300x2724 pixels).
This is how it looks in action:
Place the following JavaScript Code in the head section of your HTML page:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
/* Developed by: Abhinay Rathore [web3o.blogspot.com] */
$(document).ready(function(){
$(".magnify").mousemove(function(event){ moveMagnifier(this, event); });
$(".magnify").mouseout(function(event){ hideMagnifier(); });
});
var magnifier_size = 200; //Change Magnifier size here.
var cursor_offset = 10; //Change Cursor Offset here.
var ratio, mHalf, pic_offset;
function showMagnifier(picId, e){ //Show Magnifier
hideMagnifier();
//Create and add magnified image to the body
var magnifier = document.createElement("img");
magnifier.id = "magnifier"
magnifier.src = picId.src;
magnifier.style.position = "absolute";
document.body.appendChild(magnifier);
//Calculate size ratio of original and magnified images
ratio = magnifier.width / $(picId).width();
mHalf = magnifier_size / 2;
pic_offset = $(picId).offset(); //Picture offset
//Get mouse position on the image
var picX = e.pageX - pic_offset.left;
var picY = e.pageY - pic_offset.top;
clipImage(magnifier, picX, picY); //Clip the magnified image
//Position the magnified image next to mouse cursor
positionImage(magnifier, picX, picY, e.pageX, e.pageY)
}
function moveMagnifier(picId, e){ //Move Magnifier
var magnifier = document.getElementById("magnifier");
if(magnifier){ //If magnified image exists...
//Get mouse position on the image
var picX = e.pageX - pic_offset.left;
var picY = e.pageY - pic_offset.top;
clipImage(magnifier, picX, picY); //Clip the magnified image
//Position the magnified image next to mouse cursor
positionImage(magnifier, picX, picY, e.pageX, e.pageY)
} else { //If magnified image does not exist...
showMagnifier(picId, e);
}
}
function clipImage(magnifier, picX, picY){ //Clip magnified image...
var centerX = picX * ratio;
var centerY = picY * ratio;
$(magnifier).css("clip", "rect(" + Math.round(centerY - mHalf) + "px," +
Math.round(centerX + mHalf) + "px," +
Math.round(centerY + mHalf) + "px," +
Math.round(centerX - mHalf) + "px)");
}
function positionImage(magnifier, picX, picY, pageX, pageY){ //Position magnified image...
$(magnifier).css({'top': pageY - (picY * ratio) + mHalf + cursor_offset,
'left': pageX - (picX * ratio) + mHalf + cursor_offset});
}
function hideMagnifier(){ //Hide Magnifier
$("#magnifier").remove(); //Remove the Magnifier Image
}
</script>
The CSS code I have used here is only to display the original images on the HTML page. You can use you own CSS styles and use the image class in the jQuery Selectors. You actually don’t need any CSS code to use this tool. You can use it directly by assigning mouse events to your images manually.
<style type="text/css">
.magnify{
width: 500px;
height: auto;
cursor: crosshair;
}
</style>
The HTML Code for this image magnifier is very simple to use. If you are using CSS layout then you can use jQuery Selectors to select the images automatically.
<img class="magnify" src="taj.jpg" />
If you want to assign Magnification feature to your images manually, you can add mouse events to your images as shows below:
<img src="taj.jpg" style="width:500px" onmousemove="moveMagnifier(this, event)" onmouseout="hideMagnifier()" />
