Fancy Image Zoom Plugin with jQuery and CSS3 - Skdzoom
| File Size: | 1.20 MB |
|---|---|
| Views Total: | 2899 |
| 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.










