Beautiful jQuery Image Zoom Plugin - Nivo Zoom

File Size: 5.2 KB
Views Total: 4044
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Beautiful jQuery Image Zoom Plugin - Nivo Zoom

Nivo Zoom is a clean, lightweight and cross-browser Image Zoomer built with jQuery that enlarges your images/photos with 5 different zoom types when mouse clicks them.

Basic Usage:

1. Include jQuery library and jquery.nivo.zoom.pack.js in your head section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.x.x/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.zoom.pack.js" type="text/javascript"></script>

2. Inlcude Nivo Zoom CSS to style the plugin

<link rel="stylesheet" href="nivo-zoom.css" type="text/css" media="screen" />

3. Markup

<a href="images/xxx_large.jpg" class="nivoZoom">
	<img src="images/xxx.jpg" alt="Demo" />
</a>

4. Call the plugin

<script type="text/javascript">
$(window).load(function() {
	$('body').nivoZoom();
});
</script>

5. More Options

<script type="text/javascript">
$(window).load(function() {
	$('body').nivoZoom({
		speed:500,
		zoomHoverOpacity:0.8,
		overlay:false,
		overlayColor:'#333',
		overlayOpacity:0.5,
		captionOpacity:0.8
	});
});
</script>

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