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
   
Fancy Image Zoom Plugin with jQuery and CSS3 - Skdzoom

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.