Beautiful jQuery Image Zoom Plugin - Nivo Zoom
File Size: | 5.2 KB |
---|---|
Views Total: | 4087 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.