masonry-rails 0.1.0 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +363 -4
- data/VERSION +1 -1
- data/masonry-rails.gemspec +14 -4
- data/vendor/assets/images/masonry/loader.gif +0 -0
- data/vendor/assets/javascripts/masonry/{jquery.event.drag-2.2.js → jquery.event-drag.js} +0 -0
- data/vendor/assets/javascripts/masonry/jquery.imagesloaded.js +112 -0
- data/vendor/assets/javascripts/masonry/jquery.imagesloaded.min.js +2 -0
- data/vendor/assets/javascripts/masonry/jquery.infinitescroll.min.js +10 -10
- data/vendor/assets/javascripts/masonry/jquery.loremimages.min.js +2 -0
- data/vendor/assets/stylesheets/masonry/basic.css +58 -0
- data/vendor/assets/stylesheets/masonry/centered.css +2 -0
- data/vendor/assets/stylesheets/masonry/fluid.css +16 -0
- data/vendor/assets/stylesheets/masonry/gutters.css +10 -0
- data/vendor/assets/stylesheets/masonry/infinitescroll.css +17 -0
- data/vendor/assets/stylesheets/masonry/right-to-left.css +5 -0
- data/vendor/assets/stylesheets/masonry/transitions.css +36 -0
- metadata +15 -5
- data/vendor/assets/stylesheets/masonry/style.css +0 -616
data/README.md
CHANGED
@@ -6,6 +6,18 @@ Using fork from [masonry](https://github.com/kristianmandrup/masonry)
|
|
6
6
|
|
7
7
|
See more Masonry info at [masonry README](https://github.com/desandro/masonry/README.mdown)
|
8
8
|
|
9
|
+
This gem includes:
|
10
|
+
|
11
|
+
* jquery masonry
|
12
|
+
* jquery imagesLoaded
|
13
|
+
* jquery infinitescroll
|
14
|
+
* jquery event drag
|
15
|
+
|
16
|
+
For random content generation
|
17
|
+
|
18
|
+
* box maker
|
19
|
+
* loremimages
|
20
|
+
|
9
21
|
## Usage
|
10
22
|
|
11
23
|
In Gemfile
|
@@ -14,12 +26,22 @@ In Gemfile
|
|
14
26
|
|
15
27
|
### CSS
|
16
28
|
|
29
|
+
You can include stylesheets extracted from the masonry examples directly:
|
30
|
+
|
17
31
|
Manifest `application.css` file:
|
18
32
|
|
19
33
|
```css
|
20
|
-
*= require 'masonry/
|
34
|
+
*= require 'masonry/basic'
|
35
|
+
*= require 'masonry/centered'
|
36
|
+
*= require 'masonry/fluid'
|
37
|
+
*= require 'masonry/gutters'
|
38
|
+
*= require 'masonry/infinitescroll'
|
39
|
+
*= require 'masonry/right-to-left'
|
40
|
+
*= require 'masonry/transitions'
|
21
41
|
```
|
22
42
|
|
43
|
+
Use these stylesheets as a base in order to play around with different effects... :)
|
44
|
+
|
23
45
|
### Javascript
|
24
46
|
|
25
47
|
```javascript
|
@@ -28,14 +50,351 @@ Manifest `application.css` file:
|
|
28
50
|
|
29
51
|
Optional
|
30
52
|
|
31
|
-
|
53
|
+
```javascript
|
54
|
+
// require masonry/jquery.event-drag
|
55
|
+
// require masonry/jquery.imagesloaded.min
|
56
|
+
// require masonry/jquery.infinitescroll.min
|
32
57
|
// require masonry/modernizr-transitions
|
33
|
-
|
34
|
-
|
58
|
+
```
|
59
|
+
|
60
|
+
Content generation helpers:
|
35
61
|
|
62
|
+
```javascript
|
63
|
+
// require masonry/box-maker
|
64
|
+
// require masonry/jquery.loremimages.min
|
65
|
+
``
|
36
66
|
|
37
67
|
See examples on [masonry](http://masonry.desandro.com/docs/intro.html) or [github](https://github.com/desandro/masonry)
|
38
68
|
|
69
|
+
### Setup
|
70
|
+
|
71
|
+
We will use the _infinite scroll_ example for a full walkthrough of how to setup and use Masonry. We add the classes `transitions-enabled`and `infinite-scroll` to the container in order to enable these two effects simultaneously. Look further down in this guide to see configurations of other effects that canbe combined ;)
|
72
|
+
|
73
|
+
*Main container*
|
74
|
+
|
75
|
+
```html
|
76
|
+
<div id="container" class="transitions-enabled infinite-scroll clearfix">
|
77
|
+
|
78
|
+
<div class="box col3">
|
79
|
+
|
80
|
+
<div class="box col1">
|
81
|
+
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
|
82
|
+
</div>
|
83
|
+
|
84
|
+
<div class="box col2">
|
85
|
+
<p>
|
86
|
+
<a href="http://www.flickr.com/photos/nemoorange/3319714470/" title="Whitlow's on Wilson by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3008/3319714470_c05a5cb5a8_m.jpg" alt="Whitlow's on Wilson" /></a>
|
87
|
+
</p>
|
88
|
+
</div>
|
89
|
+
...
|
90
|
+
</div>
|
91
|
+
```
|
92
|
+
|
93
|
+
```css
|
94
|
+
#container {
|
95
|
+
background: #FFF;
|
96
|
+
padding: 5px;
|
97
|
+
margin-bottom: 20px;
|
98
|
+
border-radius: 5px;
|
99
|
+
clear: both;
|
100
|
+
-webkit-border-radius: 5px;
|
101
|
+
-moz-border-radius: 5px;
|
102
|
+
border-radius: 5px;
|
103
|
+
}
|
104
|
+
|
105
|
+
.clearfix:before, .clearfix:after { content: ""; display: table; }
|
106
|
+
.clearfix:after { clear: both; }
|
107
|
+
.clearfix { zoom: 1; }
|
108
|
+
```
|
109
|
+
|
110
|
+
Configuring the different brick sizes:
|
111
|
+
|
112
|
+
```css
|
113
|
+
.col1 { width: 80px; }
|
114
|
+
.col2 { width: 180px; }
|
115
|
+
.col3 { width: 280px; }
|
116
|
+
.col4 { width: 380px; }
|
117
|
+
.col5 { width: 480px; }
|
118
|
+
|
119
|
+
.col1 img { max-width: 80px; }
|
120
|
+
.col2 img { max-width: 180px; }
|
121
|
+
.col3 img { max-width: 280px; }
|
122
|
+
.col4 img { max-width: 380px; }
|
123
|
+
.col5 img { max-width: 480px; }
|
124
|
+
```
|
125
|
+
|
126
|
+
## Gutters
|
127
|
+
|
128
|
+
The `gutterWidth` option adds additional spacing between columns, but not on the outer sides of the container.
|
129
|
+
|
130
|
+
Example:
|
131
|
+
|
132
|
+
```javascript
|
133
|
+
$(function(){
|
134
|
+
|
135
|
+
$('#container').masonry({
|
136
|
+
itemSelector: '.box',
|
137
|
+
columnWidth: 100,
|
138
|
+
gutterWidth: 40
|
139
|
+
});
|
140
|
+
|
141
|
+
});
|
142
|
+
```
|
143
|
+
|
144
|
+
Add class `has-gutters` to container for this effect.
|
145
|
+
|
146
|
+
## Right to left
|
147
|
+
|
148
|
+
Enable right-to-layout by setting the `isRTL` option to true.
|
149
|
+
|
150
|
+
See `masonry/right-to-left.css`
|
151
|
+
|
152
|
+
```javascript
|
153
|
+
$(function(){
|
154
|
+
|
155
|
+
$('#container').masonry({
|
156
|
+
itemSelector: '.box',
|
157
|
+
columnWidth: 100,
|
158
|
+
isAnimated: !Modernizr.csstransitions,
|
159
|
+
isRTL: true
|
160
|
+
});
|
161
|
+
|
162
|
+
});
|
163
|
+
```
|
164
|
+
|
165
|
+
Add class `rtl` to container for this effect ;)
|
166
|
+
|
167
|
+
## Centered
|
168
|
+
|
169
|
+
This layout is centered by setting `isFitWidth: true` and adding necessary CSS position styles `margin: 0 auto;`.
|
170
|
+
|
171
|
+
See `masonry/centered.css`
|
172
|
+
|
173
|
+
```css
|
174
|
+
.centered { margin: 0 auto; }
|
175
|
+
```
|
176
|
+
|
177
|
+
```html
|
178
|
+
<div id="container" class="transitions-enabled centered clearfix masonry">
|
179
|
+
...
|
180
|
+
</div>
|
181
|
+
```
|
182
|
+
|
183
|
+
```javascript
|
184
|
+
$(function(){
|
185
|
+
$('#container').masonry({
|
186
|
+
itemSelector: '.box',
|
187
|
+
columnWidth: 200,
|
188
|
+
isAnimated: !Modernizr.csstransitions,
|
189
|
+
isFitWidth: true
|
190
|
+
});
|
191
|
+
|
192
|
+
});
|
193
|
+
```
|
194
|
+
|
195
|
+
## Fluid
|
196
|
+
|
197
|
+
For fluid or responsive layouts, where the width of the column is a percentage of the container's width, you can pass in a function for `columnWidth`.
|
198
|
+
|
199
|
+
```javascript
|
200
|
+
$('#container').masonry({
|
201
|
+
itemSelector: '.box',
|
202
|
+
// set columnWidth a fraction of the container width
|
203
|
+
columnWidth: function( containerWidth ) {
|
204
|
+
return containerWidth / 5;
|
205
|
+
}
|
206
|
+
});
|
207
|
+
```
|
208
|
+
|
209
|
+
Use `masonry/fluid.css` for a head start!
|
210
|
+
|
211
|
+
## Animated transitions
|
212
|
+
|
213
|
+
Transitions used in examples
|
214
|
+
|
215
|
+
Note: use `masonry/transitions.css` for a head start!
|
216
|
+
|
217
|
+
Noice the class names: `.transitions-enabled`, `masonry` and `.masonry-brick`.
|
218
|
+
|
219
|
+
```css
|
220
|
+
.transitions-enabled.masonry,
|
221
|
+
.transitions-enabled.masonry .masonry-brick {
|
222
|
+
-webkit-transition-duration: 0.7s;
|
223
|
+
-moz-transition-duration: 0.7s;
|
224
|
+
-ms-transition-duration: 0.7s;
|
225
|
+
-o-transition-duration: 0.7s;
|
226
|
+
transition-duration: 0.7s;
|
227
|
+
}
|
228
|
+
|
229
|
+
.transitions-enabled.masonry {
|
230
|
+
-webkit-transition-property: height, width;
|
231
|
+
-moz-transition-property: height, width;
|
232
|
+
-ms-transition-property: height, width;
|
233
|
+
-o-transition-property: height, width;
|
234
|
+
transition-property: height, width;
|
235
|
+
}
|
236
|
+
|
237
|
+
.transitions-enabled.masonry .masonry-brick {
|
238
|
+
-webkit-transition-property: left, right, top;
|
239
|
+
-moz-transition-property: left, right, top;
|
240
|
+
-ms-transition-property: left, right, top;
|
241
|
+
-o-transition-property: left, right, top;
|
242
|
+
transition-property: left, right, top;
|
243
|
+
}
|
244
|
+
|
245
|
+
|
246
|
+
/* disable transitions on container */
|
247
|
+
.transitions-enabled.infinite-scroll.masonry {
|
248
|
+
-webkit-transition-property: none;
|
249
|
+
-moz-transition-property: none;
|
250
|
+
-ms-transition-property: none;
|
251
|
+
-o-transition-property: none;
|
252
|
+
transition-property: none;
|
253
|
+
}
|
254
|
+
```
|
255
|
+
|
256
|
+
Note: You can use compass and sass to auto-generate these [transitions](http://compass-style.org/reference/compass/css3/transition/) for all browser prefixes ;)
|
257
|
+
|
258
|
+
*CSS transitions*
|
259
|
+
|
260
|
+
Alternatively, you can rely on CSS3 transitions to animate layout rearrangements. Enabling transitions is recommended, as they provide for better browser performance over jQuery animation.
|
261
|
+
|
262
|
+
In your CSS, add transition styles below. The Masonry plugin will add a class of masonry to the container after the first arrangement so transitions can be applied afterward. Item elements will have a class of masonry-brick added.
|
263
|
+
|
264
|
+
*Animate via Modernizr*
|
265
|
+
|
266
|
+
To get the best of both worlds, you can use *Modernizr* to detect browser support for CSS transitions. Add the transitions styles above, then enable animated based on Modernizr’s detected support for transitions. This will allow browsers that support *CSS transitions* to use them, and browsers without support to use *jQuery animation*.
|
267
|
+
|
268
|
+
```javascript
|
269
|
+
$('#container').masonry({
|
270
|
+
// options...
|
271
|
+
isAnimated: !Modernizr.csstransitions
|
272
|
+
});
|
273
|
+
```
|
274
|
+
|
275
|
+
Use the [modernizr-rails](https://github.com/kristianmandrup/modernizr-rails) gem to include *Modernizr* ;)
|
276
|
+
|
277
|
+
Or simply include `masonry/modernizr-transitions` in your javascript manifest.
|
278
|
+
|
279
|
+
## Infinite scroll
|
280
|
+
|
281
|
+
Use with [infinite-scroll](https://github.com/paulirish/infinite-scroll) which is included for convenience. All credits & license rights (MIT) to Paul Irish.
|
282
|
+
|
283
|
+
```javascript
|
284
|
+
// require masonry/jquery.infinitescroll.min
|
285
|
+
```
|
286
|
+
|
287
|
+
See [infinite-scroll-jquery-plugin](http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/) for configuration info.
|
288
|
+
|
289
|
+
Also see [demo](http://masonry.desandro.com/demos/infinite-scroll.html)
|
290
|
+
and [source](view-source:http://masonry.desandro.com/demos/infinite-scroll.html)
|
291
|
+
|
292
|
+
|
293
|
+
*Navigation* for infinite scroll
|
294
|
+
|
295
|
+
Put a `<nav>` under your main container. This will trigger loading the next page!
|
296
|
+
|
297
|
+
```html
|
298
|
+
<nav id="page-nav">
|
299
|
+
<a href="../pages/2.html"></a>
|
300
|
+
</nav>
|
301
|
+
```
|
302
|
+
|
303
|
+
The link should load in a page containing elements that match `.block`
|
304
|
+
|
305
|
+
```html
|
306
|
+
<div class="box col3">
|
307
|
+
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
|
308
|
+
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
|
309
|
+
<ul>
|
310
|
+
<li>Lacus a ultrices sagittis</li>
|
311
|
+
<li>Democratis</li>
|
312
|
+
<li>Plummus</li>
|
313
|
+
</ul>
|
314
|
+
</div>
|
315
|
+
```
|
316
|
+
|
317
|
+
These will be appended at the bottom of the `#container`. If you are using search with paging, be sure to update the page counter after each load somehow.
|
318
|
+
|
319
|
+
```javascript
|
320
|
+
$(function(){
|
321
|
+
|
322
|
+
var $container = $('#container');
|
323
|
+
|
324
|
+
$container.imagesLoaded(function(){
|
325
|
+
$container.masonry({
|
326
|
+
itemSelector: '.box',
|
327
|
+
columnWidth: 100
|
328
|
+
});
|
329
|
+
});
|
330
|
+
|
331
|
+
$container.infinitescroll({
|
332
|
+
navSelector : '#page-nav', // selector for the paged navigation
|
333
|
+
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
|
334
|
+
itemSelector : '.box', // selector for all items you'll retrieve
|
335
|
+
loading: {
|
336
|
+
finishedMsg: 'No more pages to load.',
|
337
|
+
img: 'http://i.imgur.com/6RMhx.gif'
|
338
|
+
}
|
339
|
+
},
|
340
|
+
// trigger Masonry as a callback
|
341
|
+
function( newElements ) {
|
342
|
+
// hide new items while they are loading
|
343
|
+
var $newElems = $( newElements ).css({ opacity: 0 });
|
344
|
+
// ensure that images load before adding to masonry layout
|
345
|
+
$newElems.imagesLoaded(function(){
|
346
|
+
// show elems now they're ready
|
347
|
+
$newElems.animate({ opacity: 1 });
|
348
|
+
$container.masonry( 'appended', $newElems, true );
|
349
|
+
});
|
350
|
+
}
|
351
|
+
);
|
352
|
+
});
|
353
|
+
```
|
354
|
+
|
355
|
+
The loader should be "on top". Here the loader iscon is configured in the `loading` object as `http://i.imgur.com/6RMhx.gif`. This loader is included as an image asset at `assets/images/masonry/loader.gif`. So instead simply use:
|
356
|
+
|
357
|
+
`img: '/assets/masonry/loader.gif'`
|
358
|
+
|
359
|
+
Or whichever animated loader icon you want to use ;)
|
360
|
+
|
361
|
+
```css
|
362
|
+
/* Infinite Scroll loader */
|
363
|
+
#infscr-loading {
|
364
|
+
text-align: center;
|
365
|
+
z-index: 100;
|
366
|
+
position: fixed;
|
367
|
+
left: 45%;
|
368
|
+
bottom: 40px;
|
369
|
+
width: 200px;
|
370
|
+
padding: 10px;
|
371
|
+
background: #000;
|
372
|
+
opacity: 0.8;
|
373
|
+
color: #FFF;
|
374
|
+
-webkit-border-radius: 10px;
|
375
|
+
-moz-border-radius: 10px;
|
376
|
+
border-radius: 10px;
|
377
|
+
}
|
378
|
+
```
|
379
|
+
|
380
|
+
## Use with images
|
381
|
+
|
382
|
+
See [image demo](http://masonry.desandro.com/demos/images.html) which uses *imagesLoaded* plugin (included - see below)
|
383
|
+
|
384
|
+
## Images Loaded plugin
|
385
|
+
|
386
|
+
See [repo](http://desandro.github.com/imagesloaded/)
|
387
|
+
|
388
|
+
A jQuery plugin that triggers a callback after all the selected/child images have been loaded. Because you can't do `.load()` on cached images.
|
389
|
+
|
390
|
+
```javascript
|
391
|
+
// require masonry/jquery.imagesloaded.min
|
392
|
+
```
|
393
|
+
|
394
|
+
Also included is the [loremimages plugin](http://darsa.in/loremImages/), useful for testing purposes ;)
|
395
|
+
|
396
|
+
+ [**View contributors**](https://github.com/desandro/imagesloaded/contributors)
|
397
|
+
|
39
398
|
## Contributing to masonry-rails
|
40
399
|
|
41
400
|
* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.1.
|
1
|
+
0.1.5
|
data/masonry-rails.gemspec
CHANGED
@@ -5,11 +5,11 @@
|
|
5
5
|
|
6
6
|
Gem::Specification.new do |s|
|
7
7
|
s.name = "masonry-rails"
|
8
|
-
s.version = "0.1.
|
8
|
+
s.version = "0.1.5"
|
9
9
|
|
10
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
11
11
|
s.authors = ["Kristian Mandrup"]
|
12
|
-
s.date = "2012-08-
|
12
|
+
s.date = "2012-08-30"
|
13
13
|
s.description = "Masonry will rock your world!"
|
14
14
|
s.email = "kmandrup@gmail.com"
|
15
15
|
s.extra_rdoc_files = [
|
@@ -63,13 +63,23 @@ Gem::Specification.new do |s|
|
|
63
63
|
"spec/_posts/tests/2011-09-27-centered-few.html",
|
64
64
|
"spec/index.html",
|
65
65
|
"spec/spec_helper.rb",
|
66
|
+
"vendor/assets/images/masonry/loader.gif",
|
66
67
|
"vendor/assets/javascripts/masonry/box-maker.js",
|
67
|
-
"vendor/assets/javascripts/masonry/jquery.event
|
68
|
+
"vendor/assets/javascripts/masonry/jquery.event-drag.js",
|
69
|
+
"vendor/assets/javascripts/masonry/jquery.imagesloaded.js",
|
70
|
+
"vendor/assets/javascripts/masonry/jquery.imagesloaded.min.js",
|
68
71
|
"vendor/assets/javascripts/masonry/jquery.infinitescroll.min.js",
|
72
|
+
"vendor/assets/javascripts/masonry/jquery.loremimages.min.js",
|
69
73
|
"vendor/assets/javascripts/masonry/jquery.masonry.js",
|
70
74
|
"vendor/assets/javascripts/masonry/jquery.masonry.min.js",
|
71
75
|
"vendor/assets/javascripts/masonry/modernizr-transitions.js",
|
72
|
-
"vendor/assets/stylesheets/masonry/
|
76
|
+
"vendor/assets/stylesheets/masonry/basic.css",
|
77
|
+
"vendor/assets/stylesheets/masonry/centered.css",
|
78
|
+
"vendor/assets/stylesheets/masonry/fluid.css",
|
79
|
+
"vendor/assets/stylesheets/masonry/gutters.css",
|
80
|
+
"vendor/assets/stylesheets/masonry/infinitescroll.css",
|
81
|
+
"vendor/assets/stylesheets/masonry/right-to-left.css",
|
82
|
+
"vendor/assets/stylesheets/masonry/transitions.css"
|
73
83
|
]
|
74
84
|
s.homepage = "http://github.com/kristianmandrup/masonry-rails"
|
75
85
|
s.licenses = ["MIT"]
|
Binary file
|
File without changes
|
@@ -0,0 +1,112 @@
|
|
1
|
+
/*!
|
2
|
+
* jQuery imagesLoaded plugin v2.0.1
|
3
|
+
* http://github.com/desandro/imagesloaded
|
4
|
+
*
|
5
|
+
* MIT License. by Paul Irish et al.
|
6
|
+
*/
|
7
|
+
|
8
|
+
/*jshint curly: true, eqeqeq: true, noempty: true, strict: true, undef: true, browser: true */
|
9
|
+
/*global jQuery: false */
|
10
|
+
|
11
|
+
;(function($, undefined) {
|
12
|
+
'use strict';
|
13
|
+
|
14
|
+
// blank image data-uri bypasses webkit log warning (thx doug jones)
|
15
|
+
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
|
16
|
+
|
17
|
+
$.fn.imagesLoaded = function( callback ) {
|
18
|
+
var $this = this,
|
19
|
+
deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
|
20
|
+
hasNotify = $.isFunction(deferred.notify),
|
21
|
+
$images = $this.find('img').add( $this.filter('img') ),
|
22
|
+
loaded = [],
|
23
|
+
proper = [],
|
24
|
+
broken = [];
|
25
|
+
|
26
|
+
function doneLoading() {
|
27
|
+
var $proper = $(proper),
|
28
|
+
$broken = $(broken);
|
29
|
+
|
30
|
+
if ( deferred ) {
|
31
|
+
if ( broken.length ) {
|
32
|
+
deferred.reject( $images, $proper, $broken );
|
33
|
+
} else {
|
34
|
+
deferred.resolve( $images );
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
if ( $.isFunction( callback ) ) {
|
39
|
+
callback.call( $this, $images, $proper, $broken );
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
function imgLoaded( img, isBroken ) {
|
44
|
+
// don't proceed if BLANK image, or image is already loaded
|
45
|
+
if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
|
46
|
+
return;
|
47
|
+
}
|
48
|
+
|
49
|
+
// store element in loaded images array
|
50
|
+
loaded.push( img );
|
51
|
+
|
52
|
+
// keep track of broken and properly loaded images
|
53
|
+
if ( isBroken ) {
|
54
|
+
broken.push( img );
|
55
|
+
} else {
|
56
|
+
proper.push( img );
|
57
|
+
}
|
58
|
+
|
59
|
+
// cache image and its state for future calls
|
60
|
+
$.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
|
61
|
+
|
62
|
+
// trigger deferred progress method if present
|
63
|
+
if ( hasNotify ) {
|
64
|
+
deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
|
65
|
+
}
|
66
|
+
|
67
|
+
// call doneLoading and clean listeners if all images are loaded
|
68
|
+
if ( $images.length === loaded.length ){
|
69
|
+
setTimeout( doneLoading );
|
70
|
+
$images.unbind( '.imagesLoaded' );
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
// if no images, trigger immediately
|
75
|
+
if ( !$images.length ) {
|
76
|
+
doneLoading();
|
77
|
+
} else {
|
78
|
+
$images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
|
79
|
+
// trigger imgLoaded
|
80
|
+
imgLoaded( event.target, event.type === 'error' );
|
81
|
+
}).each( function( i, el ) {
|
82
|
+
var src = el.src;
|
83
|
+
|
84
|
+
// find out if this image has been already checked for status
|
85
|
+
// if it was, and src has not changed, call imgLoaded on it
|
86
|
+
var cached = $.data( el, 'imagesLoaded' );
|
87
|
+
if ( cached && cached.src === src ) {
|
88
|
+
imgLoaded( el, cached.isBroken );
|
89
|
+
return;
|
90
|
+
}
|
91
|
+
|
92
|
+
// if complete is true and browser supports natural sizes, try
|
93
|
+
// to check for image status manually
|
94
|
+
if ( el.complete && el.naturalWidth !== undefined ) {
|
95
|
+
imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
|
96
|
+
return;
|
97
|
+
}
|
98
|
+
|
99
|
+
// cached images don't fire load sometimes, so we reset src, but only when
|
100
|
+
// dealing with IE, or image is complete (loaded) and failed manual check
|
101
|
+
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
|
102
|
+
if ( el.readyState || el.complete ) {
|
103
|
+
el.src = BLANK;
|
104
|
+
el.src = src;
|
105
|
+
}
|
106
|
+
});
|
107
|
+
}
|
108
|
+
|
109
|
+
return deferred ? deferred.promise( $this ) : $this;
|
110
|
+
};
|
111
|
+
|
112
|
+
})(jQuery);
|