Introducing a new jQuery Photo Zoom plugin, it helps you to view bigger images on mouse over component, this is very useful for media related web applications. You can customize the PhotoZoom container based on your web page design. Very easy to implement just include the plugin using script tag and give required selector.
The tutorial contains two folders called js and images.
js
— jquery.min.js
— photoZoom.js
— photoZoom.min.js
images
— zoomLoader.gif
The Basic Setup
Include the jQuery and PhotoZoom plugin libraries into your document using script tag.
<script src="jquery.js"></script>
<script src="photoZoom.min.js"> </script>
<script>
$(document).ready(function()
{
$('body').photoZoom();
});
</script>
//HTML Code
<body>
<img src='a1.jpg' width="150" height="150"/>
<img src='a2.jpg' width="150" height="150"/>
......
......
......
</body>You can customize container design by modifying CSS elements.
$("body").photoZoom(
{
zoomStyle : {
"border":"1px solid #ccc",
"background-color":"#fff",
"box-shadow":"0 0 5px #888"
}
});Here you can reuse onMouseOver and onMouseOut events.
$("body").photoZoom(
{
onMouseOver : function(currentImage){
// do something
},
onMouseOut : function(currentImage){
// do something
}
});