-
Notifications
You must be signed in to change notification settings - Fork 8
/
demo.html
89 lines (81 loc) · 3.18 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Topbar message Plugin Demo</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$("#img_01").imageLens();
$("#img_02").imageLens({ lensSize: 200 });
$("#img_03").imageLens({ imageSrc: "sample01.jpg" });
$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });
});
</script>
<style type="text/css">
body { margin: 0px; font-family: "Trebuchet MS", Arial, Sans-Serif; font-size: 14px; }
a { color: #0066CC; text-decoration: none; }
a:hover { color: #CC0000; text-decoration: underline; }
</style>
</head>
<body style="margin-left: 25px;">
<!-- BuySellAds.com Ad Code -->
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = '//s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<!-- End BuySellAds.com Ad Code -->
<h1>
<a href="http://www.dailycoding.com/">Dailycoding.com</a>
</h1>
<p>
<a href="../imageLens.zip">Download source</a> | <a href="http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx">
Back to article</a>
</p>
<hr />
<table>
<tr>
<td>
<p><i>Note - If you are using IE 8 or lower than you will see a square lens</i></p>
<h3>Demo 1 - Default lens</h3>
<p>
<img id="img_01" src="sample01.jpg" width="384" height="240" />
</p>
<pre>$("#img_01").imageLens();</pre>
<p> </p>
<h3>Demo 2 - Custom lens size</h3>
<p>
<img id="img_02" src="sample01.jpg" width="384" height="240" />
</p>
<pre>$("#img_02").imageLens({ lensSize: 200 });</pre>
</td>
<td>
<p> </p>
<h3>Demo 3 - Custom image source</h3>
<p>
<img id="img_03" src="sample01_s.jpg" width="384" height="240" />
</p>
<pre>$("#img_03").imageLens({ imageSrc: "sample01.jpg" });</pre>
<p> </p>
<h3>Demo 4 - Other lens properties</h3>
<p>
<img id="img_04" src="sample01.jpg" width="384" height="240" />
</p>
<pre>$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });</pre>
</td>
<td valign="top" style="text-align: right;">
</td>
</tr>
</table>
<p>
Image courtesy <a href="http://www.smashingmagazine.com/">http://www.smashingmagazine.com/</a>
</p>
<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try{var pageTracker = _gat._getTracker("UA-2030729-5");pageTracker._initData();pageTracker._trackPageview();}catch(ex){}</script>
</body>
</html>