-
Notifications
You must be signed in to change notification settings - Fork 89
/
Copy pathindex.html
executable file
·207 lines (186 loc) · 11.1 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>imagefill.js | Project Page</title>
<meta name="description" content="imagefill.js - The jQuery plugin for making images fill their containers (and be centered)">
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
<!-- Extra Strength Responsive Grids https://github.com/dfcb/extra-strength-responsive-grids -->
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->
<!-- Prevent FOUC (flash of unstyled content) -->
<style type="text/css">
.no-fouc {display: none;}
</style>
<script type="text/javascript">
document.documentElement.className = 'no-fouc';
</script>
</head>
<body>
<div class="wrapper">
<header>
<div class="block">
<div class="imagefill-icon">
<img src="img/fill-icon.png" alt="">
</div>
<h1>imagefill.js</h1>
</div>
<div class="block">
<h2>The jQuery plugin for making images fill their containers (and be centered)</h2>
<p><small><em>a potentially useful tool for Responsive Web Design</em></small></p>
</div>
<div class="block">
<p>Created by <a href="http://johnpolacek.com" target="_blank">John Polacek</a></p>
<div class="follow-btn">
<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1347293944835&id=twitter-widget-0&lang=en&screen_name=johnpolacek&show_count=false&show_screen_name=true&size=l" class="twitter-follow-button" style="width: 169px; height: 28px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe>
</div>
</div>
</header>
<a href="https://github.com/johnpolacek/imagefill.js/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="simple-demo">
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
</div>
<div class="block">
<h3>Download</h3>
<p>Source files <a href="https://github.com/johnpolacek/imagefill.js/" target="_blank">on github</a> or <a href="https://github.com/johnpolacek/imagefill.js/zipball/master/" target="_blank">download the zip</a>.</p>
</div>
<div class="block">
<h3>Simple Example</h3>
<p>Given this html:</p>
<pre><div class="container"><img src="myawesomeimage" /></div></pre>
<p>Do this:</p>
<pre>$('.container').imagefill();
// image stretches to fill container</pre>
</div>
<div class="block">
<h3>Grid Example</h3>
<p>Given a grid like this:</p>
<pre><div class="grid-whole">
<div class="grid-quarter">
<img src="myawesomeimage.jpg">
</div>
<div class="grid-quarter">
<img src="myawesomeimage.jpg">
</div>
<div class="grid-quarter">
<img src="myawesomeimage.jpg">
</div>
<div class="grid-quarter">
<img src="myawesomeimage.jpg">
</div>
</div></pre>
<p>Do this:</p>
<pre>$('.grid-quarter').imagefill();
// image stretches to fill container</pre>
<div class="block clearfix">
<div class="grid-demo">
<div class="grid-quarter">
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
</div>
<div class="grid-quarter">
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
</div>
<div class="grid-quarter">
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
</div>
<div class="grid-quarter">
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
</div>
</div>
</div>
<p>Check out <a href="responsive.html" target="_blank">this simple responsive grid example</a>.</p>
</div>
<div class="block">
<h3>Different Sizes Example</h3>
<p>Given images that vary in sizes, for example using jQuery Masonry or Packery, do this:</p>
<pre>$('.item').imagefill();
// image stretches to fill container</pre>
<div class="block clearfix">
<div class="sizes-demo">
<div class="sizes-example sizes-example1">
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
</div>
<div class="sizes-example sizes-example2">
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
</div>
<div class="sizes-example sizes-example3">
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
</div>
<div class="sizes-example sizes-example4">
<img src="http://octodex.github.com/images/daftpunktocat-thomas.gif" class="loading" alt="Octocat Github Mascot">
</div>
</div>
</div>
<p>Check out <a href="packery.html" target="_blank">this simple packery example</a> which is also a nice use case for the <code>{runOnce:true}</code> option.</p>
</div>
<div class="block">
<h3>Options</h3>
<p><strong>runOnce</strong><br>
Imagefill continuously checks to see if the size of the image container changes, then it adjusts the size of the image inside. To only call imagefill once, set to true.
</p>
<pre>$('.img-container').imagefill({runOnce:true});</pre>
<p><strong>throttle</strong><br>
Imagefill continuously checks to see if the size of the image container changes, then it adjusts the size of the image inside. This option lets you adjust the frequency of this check (default is 100ms). To run at a higher frequency, such as for an animation rate like 60fps, do this:</p>
<pre>$('.animating-container').imagefill({throttle:1000/60})</pre>
<p><strong>target</strong><br>
By default, Imagefill will use 'img' as the target selector. To use a custom selector to tell imagefill which img to target for filling its container use the target option.</p>
<pre>$('.animating-container').imagefill({target:'.background-image'})</pre>
</div>
<div class="block">
<h3>Requires:</h3>
<ul>
<li><a href="https://github.com/desandro/imagesloaded">imagesLoaded</a></li>
</ul>
</div>
<div class="block">
<h3>If you like imagefill.js, you might also like:</h3>
<ul>
<li><a href="http://packery.metafizzy.co/">Packery</a> - The bin-packing layout library that is from the same <a href="https://github.com/desandro">mad genius</a> who created jQuery <a href="http://masonry.desandro.com/">Masonry</a> and <a href="http://isotope.metafizzy.co/">isotope</a>.</li>
<li><a href="https://github.com/tsvensen/equalize.js/">equalize.js</a> - The jQuery plugin for equalizing the height or width of your elements</li>
<li><a href="http://dfcb.github.io/extra-strength-responsive-grids/">Extra Strength Responsive Grids</a> - The Fluid CSS Grid System for Responsive Web Design. Take total control of your layouts.</li>
<li><a href="http://johnpolacek.github.io/stacktable.js/">stacktable.js</a> - jQuery plugin for stacking tables on small screens.</li>
<li><a href="http://johnpolacek.com/2012/10/03/help-prevent-fouc/">Prevent FOUC</a> - Prevent FOUC with 2 easy steps.</li>
</ul>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
<script src="js/jquery-imagefill.js"></script>
<script>
// SIMPLE DEMO
$('.simple-demo')
// call image fill throttled to 30 fps (default is only 10 fps, works for most situations)
.imagefill({throttle:1000/60})
// add looped animation queue
.queue(function(next) {
$(this).animate({width:640},2000).delay(2000).animate({width:90},2000).delay(2000);
$(this).queue(arguments.callee);
next();
});
// GRID DEMO
$('.grid-quarter').imagefill();
$('.grid-demo').queue(function(next) {
$(this).animate({width:320},4000).animate({width:640},4000);
$(this).queue(arguments.callee);
next();
});
// VARIED SIZES EXAMPLE
$('.sizes-example').imagefill({runOnce:true});
// Prevent FOUC
$('.no-fouc').removeClass('no-fouc');
</script>
<script>
var _gaq=[['_setAccount','UA-2821890-9'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>