Neanderthals Programming Machines

npm

Need private packages and team management tools?Check out npm Orgs. »

image-grid

1.0.1 • Public • Published

image-grid

Fast minimalist image-grid.

Layout elements with known aspect ratios in a grid as known from flickr or google image search. Elements can be either raw or wrapped images with width and height attributes - or wrapper elements with a data-ratio attribute.

  • Very fast due to using managed stylesheets instead of inline styles.
  • No library dependencies.
  • And - oh yeah, it's fast!

Usage

image-grid will handle the layout of images in a container.

HTML

<div class="container">
    <img width="400" height="400" src="http://lorempixel.com/400/400?2" />
    <img width="520" height="400" src="http://lorempixel.com/520/400?3" />
    <img width="400" height="400" src="http://lorempixel.com/400/400?4" />
    <img width="440" height="400" src="http://lorempixel.com/440/400?5" />
    <img width="360" height="400" src="http://lorempixel.com/360/400?6" />
    <img width="400" height="400" src="http://lorempixel.com/400/400?7" />
    <img width="360" height="400" src="http://lorempixel.com/360/400" />
    <img width="600" height="400" src="http://lorempixel.com/600/400" />
    <img width="480" height="400" src="http://lorempixel.com/480/400" />
    <img width="520" height="400" src="http://lorempixel.com/520/400" />
    <img width="560" height="400" src="http://lorempixel.com/560/400" />
    <img width="480" height="400" src="http://lorempixel.com/480/400?13" />
    <img width="560" height="400" src="http://lorempixel.com/560/400?14" />
    <img width="320" height="400" src="http://lorempixel.com/320/400?15" />
    <img width="480" height="400" src="http://lorempixel.com/480/400?16" />
    <img width="440" height="400" src="http://lorempixel.com/440/400?17" />
    <div>
     <img width="520" height="400" src="http://lorempixel.com/520/400?18" />
    </div>
    <div data-ratio="16-9">
     <img src="http://lorempixel.com/800/450?19" />
    </div>
</div>

JS

var grid = require("image-grid");
 
// Create a new image-grid.
 
var myImageGrid = grid(".container", {
    maxHeight: 200,
    margin: 1,
    callback: function () {
        // do stuff because layout changed.
    }
});
 
// Set new options
 
myImageGrid.set({
    margin: 10
});
 
// Deactivate the grid before removing it from the DOM.
 
myImageGrid.deactivate();
myImageGrid.container.parentNode.removeChild(myImageGrid.container);

API

imageGrid

Create an image-grid to handle the layout of images in a container.

Arguments
  • selector (string) - The selector of the image-grid container element.
  • options
    • maxHeight (number) - Optional. The maximum height of each row of images in the grid. Default is 100.
    • margin (number) - Optional. The margin between images in the grid. Default is 10.
    • callback (function) - Optional. This callback will be called everytime the layout is re-rendered. Default is null.
Returns

An image-grid instance.

image-grid instance methods

#.set

Can be used to change options after instance creation.

Arguments
  • options See imageGrid options argument.

#.render

Can be called to refresh the layout manually.

Arguments
  • force (boolean) - Optional. .

#.deactivate

Deactivates the grid and removes the stylesheet for the instance and events if necessary.

#.activate

Re-active deactivated instance.

Keywords

install

npm i image-grid

Downloadsweekly downloads

22

version

1.0.1

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability