-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (124 loc) · 5.95 KB
/
index.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CJBoCo - CJ Object Scaler</title>
<link rel="shortcut icon" href="assets/images/favicon.png">
<link href="assets/css/demo.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="wrapper">
<header>
<div class="padder">
<h1>CJ Object Scaler</h1>
<h3>A JQuery Plug-In to Scale Objects to Fit or Fill Within Another Object.</h3>
</div>
</header>
<section>
<p><strong>CJ Image Scaler</strong> will scale an object to fit or fill within a destination object. You have two scaling methods to choose from:</p>
<ul>
<li><strong>Scale To Fit (fit)</strong> - This method will scale the object image to fit the destination object.</li>
<li><strong>Scale To Fill (fill)</strong> - This method will scale the source object to completely fill the destination object.</li>
</ul>
<p>You also have the option to hide the object prior to calculating the scale amount and performing a fade in once the object has been scaled.</p>
<p>Take a look at the source code for a better look at what's going on. If you need further explanation of how this plug-in scales things, please take a look at the <a href="http://www.cjboco.com/projects.cfm/project/cj-image/1.0.0/">CJ Image 1.0</a> project which this plug-in is based off of.</p>
<h3>Image Example</h3>
<p>The function should wait until the images are loaded before attemting to scale anything.</p>
<p>Basic usage:<br />
<code>$(<em>object</em>).cjObjectScaler(<em>options</em>);</code></p>
<ul id="productGrid">
<li class="product"><img src="http://www.travelizmo.com/archives/The-North-Face-Met-5-Jacket.JPG" alt="Jacket" class="cj_image_scale_fit" /></li>
<li class="product"><img src="http://posterous.com/getfile/files.posterous.com/toniyammine/5WNGHdKOOG2Qhyxol7HATIx4AtA1pWnhH44nOBMLFrpuG5KZTw2hbRwMkWhk/hat002.jpeg" alt="Hat" class="cj_image_scale_fit" /></li>
<li class="product"><img src="http://www.wise4living.com/ccoat/images/wool_coat.jpg" alt="Coat" class="cj_image_scale_fit" /></li>
<li class="productLink"><a href="demo1.cfm"><img src="http://www.bunnyslippers.com/gfx/products/classic-bunny-slippers-2-lg.jpg" alt="Bunny Slippers" /></a></li>
</ul>
<br />
<h4>HTML Code</h4>
<pre><code><ul id="productGrid" class="clearfix">
<li class="product"><img src="http://www.travelizmo.com/archives/The-North-Face-Met-5-Jacket.JPG" alt="Jacket" class="cj_image_scale_fit" /></li>
<li class="product"><img src="http://posterous.com/getfile/files.posterous.com/toniyammine/5WNGHdKOOG2Qhyxol7HATIx4AtA1pWnhH44nOBMLFrpuG5KZTw2hbRwMkWhk/hat002.jpeg" alt="Hat" class="cj_image_scale_fit" /></li>
<li class="product"><img src="http://www.wise4living.com/ccoat/images/wool_coat.jpg" alt="Coat" class="cj_image_scale_fit" /></li>
<li class="productLink"><a href="demo1.cfm"><img src="http://www.bunnyslippers.com/gfx/products/classic-bunny-slippers-2-lg.jpg" alt="Bunny Slippers" /></a></li>
</ul></code></pre>
<h4>jQuery Code</h4>
<pre><code>// the first call sets the first 3 LI's
$(".product img").each(function() {
$(this).cjObjectScaler({
method: "fit",
fade: 1200
});
});
$(".productLink img").each(function() {
$(this).cjObjectScaler({
destElem: $(this).parent().parent(),
method: "fill",
fade: 150
});
});</code></pre>
<br />
<h3>Object Example</h3>
<p><strong>CJ Object Scaler</strong> isn't limited to just scaling images. It can also be used to scale any object. Not sure what you would use it for, but it will do it just the same. Also, notice that the function takes in account BORDER width as well.</p>
<div id="bigObject">
<div id="smallObject"></div>
</div>
<br />
<h4>HTML Code</h4>
<pre><code><div id="bigObject">
<div id="smallObject"></div>
</div></code></pre>
<h4>jQuery Code</h4>
<p>Notice that this example uses a <strong>callback</strong> function to add text to the object once the scaling is complete. (Credit goes to Chris Bellew <[email protected]> for suggesting this feature. Thanks Chris!)</p>
<pre><code>$("#smallObject").each(function() {
$(this).cjObjectScaler({
method: "fit",
fade: 550
callback: function() {
$("#smallObject").html("Done loading object...<br /><br />(Example of the callback function.)");
}
});
});</code></pre>
<br />
</section>
<footer>
<div class="padder"> ©2011 <a href="http://www.cjboco.com/">Creative Juices Bo. Co.</a> All rights reserved.<br />
Licensed under the MIT.</br>
</div>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="assets/js/jquery.cj_object_scaler.js"></script>
<script>
(function($) {
"use strict";
$(".product img").each(function() {
$(this).cjObjectScaler({
fade: 1200
});
});
$(".productLink img").each(function() {
$(this).cjObjectScaler({
destElem: $(this).parents('.productLink'),
method: "fill",
fade: 150
});
});
$("#smallObject").each(function() {
$(this).cjObjectScaler({
method: "fit",
fade: 550,
callback: function() {
$("#smallObject").html("Done loading object...<br /><br />(Example of the callback function.)");
}
});
});
}(jQuery));
</script>
</body>
</html>