artsy/jquery-fillwidth-lite

Name: jquery-fillwidth-lite

Owner: Artsy

Description: Lines up a single row of images to fit their container.

Created: 2015-03-17 20:55:47.0

Updated: 2016-05-28 16:23:17.0

Pushed: 2016-07-07 20:45:26.0

Homepage: null

Size: 87

Language: CoffeeScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

jquery-fillwidth-lite

Lines up a single row of images to fit their container. Like a simpler + dumber version of https://github.com/craigspaeth/jquery.fillwidth.

Example

ryFillwidthLite($, _, imagesLoaded)
el').fillwidthLite()

With more options

jqueryFillwidthLite = require('jquery-fillwidth-lite');
ryFillwidthLite($, _, imagesLoaded)
el').fillwidthLite({

 What height you want to aim for the image to be
rgetHeight: 500,

 By default this will just line the images up so they're
 squeezed together. You may want to do something different like
 add some margin in between them. This gives you a hook so you
 can access the `img` object that looks something like this:
 {
   $el: // The <img> DOM element
   width: // The width the $el should be
   height:  // The height the $el was calculated to be after fillwidth
 }
ply: function(img, i, gutterSize) {
img.$el.width(img.width).css({ 'margin-right': '15px' })


 If you're going to add gaps via margin or padding in `apply` be
 sure to specify how much per-image here.
tterSize: 15,

 A callback for after the fillwidthing has finished
ne: function() {

See example.html for a working example.

TODOs

• Better docs
• Host example on gh-pages
• Tests
• Remove underscore and imagesloaded dependencies. Maybe jQuery eventually.
• Refactor to plain Javascript source

If you are at all interested in using this plugin please leave an issue bugging me about it and I will get on these right away.

Contributing

Please fork the project, build the changes npm run build, and submit a pull request.

License

MIT