Include jQuery library and the jQuery imagezoom plugin in the document.
1
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
2
	<script src="imagezoom.js"></script>

2. Insert an image with data-imagezoom="true" attribute into your document.
1
	<img src="1.jpg" data-imagezoom="true">

3. You can pass the options via either JS option array or Html5 data-* attributes, as in data-zoomviewsize="[300,500]"
01
	$('[data-imagezoom]').image<a href="http://www.jqueryscript.net/zoom/">Zoom</a>({
02
	 
03
	// image magnifier background color
04
	cursorcolor:'255,255,255',
05
	 
06
	// opacity
07
	opacity:0.5,
08
	 
09
	// cursor type
10
	cursor:'crosshair',
11
	 
12
	// z-index
13
	zindex:2147483647,
14
	 
15
	// zoom view size
16
	zoomviewsize:[500,500],
17
	 
18
	// zoom view position. left or right
19
	zoomviewposition:'right',
20
	 
21
	// zoom view margin
22
	zoomviewmargin:10,
23
	 
24
	// zoom view border
25
	zoomviewborder:'1px solid #000',
26
	 
27
	// zoom level
28
	magnification:3
29
	 
30
	});