— jQuery Plugin – Image Zoom In and Out

This plugin adds a functionality of zooming image in and out from mouse wheel. Its built on the mouse wheel plugin by Brandon Aaron.
If you see any room for improvement, or if you can add something than go ahead and comment and I will definitely give it a look for possible inclusion.

sourcedemo

Setup

First include jQuery library, mouse wheel plugin by Brandon Aaron, and imageZoom. You can include Easing library if in case you need easing on zoom in and out.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.imageZoom.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>

<!--Optional Easing Script-->
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

Initialize imageZoom

$('#selectorId').imageZoom(
{
	minWidth:'100', //minimum width
	maxWidth:'300',// maximum width
	increaseBy:'120',//Zoom image by pixels
	duration:2000,//animation duration
	cursor:'pointer',//cursor type
	easing:'easeOutBack' //easing type
});
sourcedemo


blog comments powered by Disqus