-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlocksize-example.html
More file actions
103 lines (88 loc) · 6.25 KB
/
locksize-example.html
File metadata and controls
103 lines (88 loc) · 6.25 KB
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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>CMLockSize</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,fieldset, dl, dt, dd, ol, ul, li, form, label, caption {margin: 0;padding: 0;border: 0;outline:0;font-family:Arial,Helvetica,sans-serif;text-align:left;color:#000;white-space:normal}
input, textarea, select {font-family:Arial,Helvetica,Sans-serif}
body {line-height: 1.2em;color:#999;font-size:10pt}
ol, ul {list-style: none}
.cmFloatLeft{float:left}
.cmFloatRight{float:right}
#main{margin:1em}
.hidden{display:none;}
.cmLockContainer{border:1px solid #000}
.cmLockSubContainer{}
.explanation{margin:1em;padding-bottom:1em;border-bottom:1px solid #000}
.explanation a{color:#33f}
.explanation ul{padding-top:.5em}
.explanation ul li{padding-bottom:.5em}
pre{border:1px dashed #333;color:#000;background-color:#eee;margin:.5em 2em;padding:.5em}
p{margin:.5em 0}
span.note{color:#666}
h1{margin:.5em}
</style>
</head>
<body>
<h1>cmlocksize plugin for jQuery</h1>
<div class="explanation">
<p>When using cmlocksize on this example page, a border is shown to illustrate the locking and then animating sizes as well as the presence and removal of the size locking wrapper.</p>
<p>* cmlocksize requires jQuery 1.4.</p>
<h4>Use:</h4>
<pre><code>$('#cmImage').cmlocksize({
animSpeed: 250, <span class="note">// speed of fade and resize animations in milliseconds</span>
delay: 100, <span class="note">// delay before resizing in milliseconds</span>
onLock: function(){ <span class="note">// a function to be run once the element size is locked</span>
$(this).attr('src','img/' + images[pointer]);
},
onUnlock: function(){ <span class="note">// a function to be run once the resizing has finished</span>
//nothing
},
fade: true, <span class="note">// fade the element out / in and animate the resize * true is recommended for current code *</span>
autoUnlock: true <span class="note">// if set to false, you can call the unlock method when you want to</span>
});</code></pre>
<h4>Methods:</h4>
<pre><code>$('#cmImage').cmlocksize('lockOn'); <span class="note">// instantiate the lock</span>
$('#cmImage').cmlocksize('lockOff'); <span class="note">// programmatically release the lock</span>
$('#cmImage').cmlocksize('destroy'); <span class="note">// destroy the instance of cmlocksize</span></code></pre>
<ul>
<li>Click <a href="javascript:void(0);" class="cmImageChange">here</a> (or on the image itself) to see the effect. Repeated clicks will continue to demonstrate the behavior.</li>
<li><a href="javascript:void(0);" id="destroy">Destroy instance of cmlocksize</a></li>
<li><a href="js/jquery/jquery.cmlocksize.js" target="_blank">View jquery.cmlocksize.js</a></li>
</ul>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla justo, condimentum dapibus vulputate ac, feugiat in magna. Morbi congue, lectus eu tincidunt gravida, velit sem rutrum dolor, id convallis mauris dui vitae orci. Integer ornare commodo vulputate. Vivamus eget dignissim arcu. Sed non odio ac massa faucibus malesuada. Donec orci ante, ullamcorper sed consequat sit amet, malesuada vitae orci. Proin ut sapien at quam tristique malesuada vitae quis nisl. Cras et nunc sapien, commodo imperdiet erat. Sed non quam quis massa ultricies faucibus sed nec tellus. Nullam pellentesque sodales egestas. Aenean accumsan volutpat lectus, eget tincidunt diam pellentesque a. Donec lacinia eleifend nibh non tempus.</p>
<img src="img/sgl.png" alt="image" id="cmImage" class="cmImageChange"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla justo, condimentum dapibus vulputate ac, feugiat in magna. Morbi congue, lectus eu tincidunt gravida, velit sem rutrum dolor, id convallis mauris dui vitae orci. Integer ornare commodo vulputate. Vivamus eget dignissim arcu. Sed non odio ac massa faucibus malesuada. Donec orci ante, ullamcorper sed consequat sit amet, malesuada vitae orci. Proin ut sapien at quam tristique malesuada vitae quis nisl. Cras et nunc sapien, commodo imperdiet erat. Sed non quam quis massa ultricies faucibus sed nec tellus. Nullam pellentesque sodales egestas. Aenean accumsan volutpat lectus, eget tincidunt diam pellentesque a. Donec lacinia eleifend nibh non tempus.</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="js/jquery/jquery.cmlocksize.js" type="text/javascript"></script>
<script type="text/javascript">
var pointer = 0;
var images = ['sgl.png', 'gulls.png', 'greenarrow.png', 'birds.png', 'silh.png', 'sunset.png', 'three.png', 'twogulls.png', 'highres_15632461.jpg', 'de.png', 'highres_15632460.png'];
$(document).ready(function(){
$('#destroy').click(function(){
$('#cmImage').cmlocksize('destroy');
});
$('.cmImageChange').click(function(){
pointer++;
pointer = pointer == images.length ? 0 : pointer;
$('#cmImage').cmlocksize({
animSpeed: 250,
delay: 100,
onLock: function(){
$(this).attr('src','img/' + images[pointer]);
},
onUnlock: function(){},
fade: true,
autoUnlock: true
});
$('#cmImage').cmlocksize('lockOn');
//$('#cmImage').cmlocksize('lockOff');
});
});
</script>
</body>
</html>