Easy Image Zoom Plugin For jQuery - easyzoom
File Size: | 557 KB |
---|---|
Views Total: | 8151 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.