Tikslus Zoom

Example 1: with default Parameters

HTML

Javascript

		
		
		$(document).ready(function(){
		$("#example1").tiksluszoom();
		});
	
		
		

Example 2: with hotspot/annotations

HTML

Javascript

		
		
		$(document).ready(function(){
		var annotations=new Array();
		annotations[0]={x:400,y:65,annotation:"Halogen mask. Range upto 500 meters"};
		annotations[1]={x:420,y:200,annotation:"High quality oil based Disk brakes" };
		$("#example2").tiksluszoom();
		});
	
		
		

Example 3: Custom Lens size

HTML

Javascript

		
		
		$(document).ready(function(){
		$("#example3").tiksluszoom({lensWidth:150,lensHeight:70});
		});
	
		
		

Example 4: Lens customization (opacity,background Color,Border Color)

HTML

Javascript

		
		
		$(document).ready(function(){
		$("#example4").tiksluszoom({lensWidth:150,lensHeight:70,lensOpacity:0.8,lensBorderColor:'#ff0000',lensBackgroundColor:'#ffaacc',lensBorder:3});
		});
	
		
		

Example 5: animation

HTML

Javascript

		
		
		$(document).ready(function(){
		$("#example5").tiksluszoom({zoomAnimation:true,zoomAnimationInterval:25});
		});
	
		
		

Example 6: Load Big image dynamically

HTML

		
		
		

		
		

		
Change Big image Dynamically
		
		
		

Javascript

		
		
		$(document).ready(function(){
		$("#example6").tiksluszoom();
		
		$("#button").click(function(e){
		e.preventDefault();
		var new_img="images/bike_blue_dynamic.jpg";
		  var tiksluszoom=$("#example6").data('tiksluszoom');
		tiksluszoom.loadBigImage(new_img);
		});
		
		
		});
	
		
		

Change Big image Dynamically