24 lines
629 B
HTML
24 lines
629 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset='utf-8'/>
|
||
|
|
<title>jQuery elevateZoom Demo</title>
|
||
|
|
<script src='jquery-1.8.3.min.js'></script>
|
||
|
|
<script src='jquery.elevatezoom.js'></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Basic Zoom Example</h1>
|
||
|
|
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
see more examples online <a href="http://www.elevateweb.co.uk/image-zoom/examples">http://www.elevateweb.co.uk/image-zoom/examples</a>
|
||
|
|
<script>
|
||
|
|
$('#zoom_01').elevateZoom({
|
||
|
|
zoomType: "inner",
|
||
|
|
cursor: "crosshair",
|
||
|
|
zoomWindowFadeIn: 500,
|
||
|
|
zoomWindowFadeOut: 750
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|