# jquery-fillwidth-lite

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

Latest version **1.0.8** (published 2016-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install jquery-fillwidth-lite
pnpm add jquery-fillwidth-lite
yarn add jquery-fillwidth-lite
bun add jquery-fillwidth-lite
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2016-07-07 |
| First published | 2015-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Craig Spaeth |
| Maintainers | craigspaeth |
| Keywords | jquery, fillwidth, lite |

## Links

- npm: https://www.npmjs.com/package/jquery-fillwidth-lite
- Repository: https://github.com/artsy/jquery-fillwidth-lite
- Issues: https://github.com/artsy/jquery-fillwidth-lite/issues
- npm.io page: https://npm.io/package/jquery-fillwidth-lite

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2016-07-07
- 1.0.7 — 2016-07-07
- 1.0.6 — 2016-07-06
- 1.0.5 — 2016-07-05
- 1.0.4 — 2016-07-05
- 1.0.3 — 2015-03-21
- 1.0.2 — 2015-03-21
- 1.0.1 — 2015-03-21
- 1.0.0 — 2015-03-21

## 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.

![](https://s3.amazonaws.com/f.cl.ly/items/2Y1u0n0H2h1y0I3n2I03/Image%202015-03-21%20at%206.44.38%20PM.png)

## Example

````javascript
jqueryFillwidthLite($, _, imagesLoaded)
$('#el').fillwidthLite()
````

With more options

````javascript
var jqueryFillwidthLite = require('jquery-fillwidth-lite');
jqueryFillwidthLite($, _, imagesLoaded)
$('#el').fillwidthLite({

  // What height you want to aim for the image to be
  targetHeight: 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
  // }
  apply: 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.
  gutterSize: 15,

  // A callback for after the fillwidthing has finished
  done: 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

---
_Source: https://npm.io/package/jquery-fillwidth-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._