Are you looking for the best Photo zoom plugin. Today I will show you how to create a Jquery plugin for Image Zoom on mouse hover. You can even customize the PhotoZoom container based on your web page design. Just include the plugin using script tag and give required selector, take a look at this live demo.
PROJECT SCREENSHOT:
STEP 1:
Include the jQuery and PhotoZoom plugin libraries into your document using script tag.
[code]<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22photoZoom.min.js%22%3E%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24(document).ready(function()%0A%7B%0A%24(‘body’).photoZoom()%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
//HTML Code
<body>
<img src=’one.jpg’/>
<img src=’two.jpg’/>
……
……
</body>[/code]
Step 2 :
You can customize container design by modifying CSS elements.
[code]$("body").photoZoom(
{
zoomStyle : {
"border":"1px solid #ccc",
"background-color":"#fff",
"box-shadow":"0 0 5px #888"
}
});[/code]
Step 3 :
You can reuse onMouseOver and onMouseOut events.
[code]$("body").photoZoom(
{
onMouseOver : function(currentImage){
// do something
},
onMouseOut : function(currentImage){
// do something
}
});[/code]
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Jquery Scroll Effect Tutorial For One Page Website.
- Multiple Select DropDown List Tutorial in PHP and Jquery
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Web Designing Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
4. UI / UX Training.