Download
User Rating: 4/5 ( 8 votes)
Tikslus zoom is a jquery based image zoom plugin with following features:
-
Can be Easily Customised
-
Customize Lens Size,Color,Opacity
-
You can tweak little css and make lens round/circular
-
Create Hot spots/Annotations
-
View Image in LightBox
Source: github.com
1. INCLUDE CSS AND JS FILES
<link href="/css/tiksluszoom.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/tiksluszoom.min.js"></script>
2. HTML
<div id="zoom">
<img src="bike.jpg" data-big-image="large_bike.jpg" class="tiksluszoom">
</div>
3. JAVASCRIPT
$(document).ready(function(){
$("#zoom").tiksluszoom(); //called with all default values
});
4. OPTIONS
Parameter |
Default value |
Allowed Value |
Description |
lensWidth |
100 |
Any number not greater than image Width |
Defines the width of lens |
lensHeight |
100 |
Any number not greater than image Height |
Defines the Height of lens |
lensBackgroundColor |
#fff |
Valid color code (HEX value) |
Defines the background color of lens |
lensOpacity |
0.5 |
between 0.1 to 1 |
Defines the opacity of lens |
lensBorderColor |
#000 |
Valid color code (HEX value) |
Border color of lens |
showLens |
true |
True or False |
If false lens will not be visible only mouse cursor will be shown |
loaderImage |
loader.gif |
Any valid gif image (a preloader) |
shows the image during loading of high resolution image. You must provide full path of the image |
zoomAnimation |
false |
True or False |
If TRUE Zoom image will be shown using some easing |
annotationsBorderColor |
#000 |
Valid color code (HEX value) |
annotation/hotspot border color |
annotationBackgroundColor |
#fff |
Valid color code (HEX value) |
annotation/hotspot background color |
annotationOpacity |
0.3 |
between 0.1 to 1 |
Opacity of annotation/hotspot |
zoomPreviewWindowEffect |
default |
default or fade |
Zoom preview pane visibility effect. Default will just show the pane. Fade will fadein the pame |
annotations |
Blank array |
Valid javascript Array |
an array containing the annotations which describes a hotspot. |