Jquery Photo Zoom

color-change

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.

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
}
});

 

Please follow and like us:

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch,I am available for freelance work.

Leave a Reply

Your email address will not be published. Required fields are marked *