1 | # jquery.fillwidth
|
2 |
|
3 | A jQuery plugin that given a `ul` with images inside their `lis` will do some things to line them up
|
4 | so that everything fits inside their container nice and flush to the edges. Used throughout [Artsy](http://artsy.net) to make rows of images fit inside a fluid container and still stay flush without cropping the images.
|
5 |
|
6 | ![Example Artsy Screenshot](screenshots/fill_width.jpg)
|
7 |
|
8 | See [this example](http://craigspaeth.github.io/jquery.fillwidth/example) using [placekitten.com](http://placekitten.com/) for a basic implementation.
|
9 |
|
10 | ## Usage
|
11 |
|
12 | Create a DOM structure such as
|
13 |
|
14 | ````html
|
15 | <ul id='fill'>
|
16 | <li>
|
17 | <img>
|
18 | </li>
|
19 | </ul>
|
20 | ````
|
21 |
|
22 | Then apply the fillwidth plugin.
|
23 |
|
24 | ````javascript
|
25 | $('#fill').fillwidth()
|
26 | ````
|
27 |
|
28 | ## Options
|
29 |
|
30 | jquery.fillwidth takes a number of options you can pass to it's constructor.
|
31 |
|
32 | ### resizeLandscapesBy { Number } (default 200)
|
33 |
|
34 | Fillwidth will try to reduce images that are landscape (longer in width than height) up to a certain amount of pixels. Change this number to adjust the maximum amount of pixels fillwidth is allowed to reduce landscapes.
|
35 |
|
36 | ![Landscape Reduce Example](http://cl.ly/image/061J3y1g2C2U/Image%202012.12.03%203:27:57%20PM.png)
|
37 |
|
38 | ### resizeRowBy { Number } (default 30)
|
39 |
|
40 | Fillwidth will try to subtly reduce the entire height of each row up to a certain amount of pixels. Change this number to adjust the maximum amount of pixels fillwidth is allowed to reduce each row by.
|
41 |
|
42 | ![Row Height Reduce Example](http://cl.ly/image/2B3a2127330a/Image%202012.12.03%203:38:41%20PM.png)
|
43 |
|
44 | ### beforeFillWidth { Function }
|
45 |
|
46 | Pass in a callback before fillwidth does it's magic and tries to line up images
|
47 |
|
48 | ### afterFillWidth { Function }
|
49 |
|
50 | Pass in a callback right after fillwidth does it's magic and lines up images.
|
51 |
|
52 | ### imageDimensions { Array }
|
53 |
|
54 | If you know the dimensions of the child images before they finish loading, pass in an array of `{ width: X, height: X }` hashes for a quicker fillwidth that calculates before the images finish loading. See the [example](https://github.com/craigspaeth/jquery.fillwidth/blob/master/example/index.html) for how this is done.
|
55 |
|
56 | ````javascript
|
57 | $('#fill').fillwidth({
|
58 | resizeLandscapesBy: 100,
|
59 | resizeRowBy: 40,
|
60 | beforeFillWidth: function() {},
|
61 | afterFillWidth: function() {},
|
62 | imageDimensions: [{ width: 100, height: 120 }]
|
63 | })
|
64 | ````
|
65 |
|
66 | ## To build
|
67 |
|
68 | Fillwidth is written in coffeescript and must therefore be compiled before contributing updates.
|
69 |
|
70 | * Install [node](https://github.com/joyent/node/wiki/Installation)
|
71 | * Install node modules `npm install`
|
72 |
|
73 | ````
|
74 | make build
|
75 | ````
|
76 |
|
77 | ## License
|
78 |
|
79 | MIT, see [LICENSE](LICENSE.md).
|
80 |
|
\ | No newline at end of file |