Tikslus Zoom [ Click here to view DEMO ]

Thank you for purchasing Tikslus Zoom. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Getting started with Tikslus Zoom

Download and Unzip:

  • Unzip the contents of the Zipped file you have downloaded from codecanyon.net.
  • place tiksluszoom.css in the directory where you have kept your other css files. (for example: in CSS folder)
  • Place tiksluszoom.min.js and jquery.min.js in your JS library.
  • Place loader Image (loader.gif) with tiksluszoom.min.js.

Installation:

Installing Tikslus Zoom is very easy and straight-forward. Simply add the following link and scripts tags with your proper paths and paste the following code within the Head tags of your HTML document.





		
		

How to use plugin ?

Using Tiksluszoom is easy.TikslusZoom works with two images one low resolution for the visible image, and one high resolution for the zoomed image.

Inside a DIV element place the low resolution image with data-big-image attribute which specifies the high resolution image.

add class="tiksluszoom" to low resolution image

HTML markup

		
		

Activate using Jquery selector

Using Jquery selectory inside $(document).ready() or $(window).load() to activate Zoom.

		
		
		
		
ParameterDefault valueAllowed ValueDescription
lensWidth100Any number not greater than image WidthDefines the width of lens
lensHeight100Any number not greater than image HeightDefines the Height of lens
lensBackgroundColor#fffValid color code (HEX value)Defines the background color of lens
lensOpacity0.5between 0.1 to 1Defines the opacity of lens
lensBorderColor#000Valid color code (HEX value)Border color of lens
showLenstrueTrue or FalseIf false lens will not be visible only mouse cursor will be shown
loaderImageloader.gifAny valid gif image (a preloader)shows the image during loading of high resolution image. You must provide full path of the image
zoomAnimationfalseTrue or FalseIf TRUE Zoom image will be shown using some easing
annotationsBorderColor#000Valid color code (HEX value)annotation/hotspot border color
annotationBackgroundColor#fffValid color code (HEX value)annotation/hotspot background color
annotationOpacity0.3between 0.1 to 1Opacity of annotation/hotspot
zoomPreviewWindowEffectdefaultdefault or fadeZoom preview pane visibility effect. Default will just show the pane. Fade will fadein the pame
annotationsBlank arrayValid javascript Arrayan array containing the annotations which describes a hotspot.

Example:

		
			var annotations=new Array();
			annotations[0]={x:88,y:53,annotation:'some text to define this hotspot'};
			annotations[1]={x:100,y:450,annotation:'some text to define this hotspot'};
		
		
		

here, each element of the array is an object containg annotation x position, annotation y position on the Low resolution image with text describing hotspot