Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

jquery.fillwidth

A jQuery plugin that given a ul with images inside their lis will do some things to line them up so that everything fits inside their container nice and flush to the edges. Used throughout Artsy to make rows of images fit inside a fluid container and still stay flush without cropping the images.

Example Artsy Screenshot

See this example using placekitten.com for a basic implementation.

Usage

Create a DOM structure such as

<ul id='fill'>
  <li>
    <img>
  </li>
</ul>

Then apply the fillwidth plugin.

$('#fill').fillwidth()

Options

jquery.fillwidth takes a number of options you can pass to it's constructor.

resizeLandscapesBy { Number } (default 200)

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.

Landscape Reduce Example

resizeRowBy { Number } (default 30)

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.

Row Height Reduce Example

beforeFillWidth { Function }

Pass in a callback before fillwidth does it's magic and tries to line up images

afterFillWidth { Function }

Pass in a callback right after fillwidth does it's magic and lines up images.

imageDimensions { Array }

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 for how this is done.

$('#fill').fillwidth({
  resizeLandscapesBy: 100,
  resizeRowBy: 40,
  beforeFillWidth: function() {},
  afterFillWidth: function() {},
  imageDimensions: [{ width: 100, height: 120 }]
})

To build

Fillwidth is written in coffeescript and must therefore be compiled before contributing updates.

  • Install node
  • Install node modules npm install
make build

License

MIT, see LICENSE.

About

Line up images to the edge of their container (like google images) without cropping

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.