Easy Image Zoom Plugin For jQuery - easyzoom

easyzoom is considered as the easiest image zoom jQuery plugin in the world. It is lightweight (~2Kb gzip) and easy-to use.

How to use it:

1. Include jQuery Library and easyzoom.js

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="easyzoom.js"></script>

2. Call the plugin after jquery library

<script type="text/javascript">
	
jQuery(function($){
	
	$('a.zoom').easyZoom();

});

</script>

3. CSS

<style>

/*

Copy/paste this into your own stylesheet.
Edit width, height and placement of the dynamically created image zoom box. 

*/

#easy_zoom{
	width:600px;
	height:400px;	
	border:5px solid #eee;
	background:#fff;
	color:#333;
	position:absolute;
	top:60px;
	left:400px;
	overflow:hidden;
	-moz-box-shadow:0 0 10px #777;
	-webkit-box-shadow:0 0 10px #777;
	box-shadow:0 0 10px #777;
	/* vertical and horizontal alignment used for preloader text */
	line-height:400px;
	text-align:center;
	}

</style>

4. Markup

<a href="large.jpg" class="zoom"><img src="small.jpg" alt="New York"></a>

---

This awesome jQuery plugin is developed by cssglobe. For more Advanced Usages, please check the demo page or visit the official website.