Introducing a new jQuery PhotoZoom 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, take a look this live demo.
Download Script
Live DemoAuthor
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=’one.jpg’/>
<img src=’two.jpg’/>
……
……
</body>
<script src=”photoZoom.min.js”> </script>
<script>
$(document).ready(function()
{
$(‘body’).photoZoom();
});
</script>
//HTML Code
<body>
<img src=’one.jpg’/>
<img src=’two.jpg’/>
……
……
</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″
}
});
{
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
}
});
Courtesy:http://www.9lessons.info/2012/12/jquery-photo-zoom-plugin.html
