Fancy Image Zoom Plugin with jQuery and CSS3 - Skdzoom
File Size: | 1.20 MB |
---|---|
Views Total: | 2878 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Skdzoom is a fancy image zoomer that takes advantages of jQuery and CSS3 to create stunning image zoom effects in a camera lens interface, with some useful custom options.
How to use it:
1. Include jQuery library and jQuery Skdzoom Plugin on your website
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="src/skdzoom.js"></script>
2. The html. Using rel
attribute to define the large version of the image
<a id="demo" rel="images/big.jpg"> <img src="images/small.jpg" /> </a>
3. Call the plugin with options
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#demo').skdzoom({ radius: 150, // Radius of the rounded box (Big Image box). Example: 150 circleOffset: 2, // A number that can be used to djust distance between thubnail and rounded box (Big Image box). Example: 1.5 default value is 2 lensRadius: 10, // Lens Radius. Example: 10 lensZoom: true, // true/false - Default value is true. Enable or disable lens zooming imageBorder: 8, // Default value is 8. Rounded box border width imageBorderColor: #000000, // Default value is #000000. Rounded box border color imageBorderColor: #000000, // Default value is #000000. Rounded box border color imageBG: #ffffff, // Rounded box background color circleBorderColor: #000000, // Default value is #000000. Small circle border color circleBG: #ffffff, // Small circle background color fadeSpeed: 500, // Fading Speed in micro seconds. Example: 500 }); }); </script>
This awesome jQuery plugin is developed by samirkumardas. For more Advanced Usages, please check the demo page or visit the official website.