Align Blocks

Arrange Images with percentages

Instalation

Using jspm:

jspm install npm:align-blocks

Using npm:

npm install align-blocks

Manual:

Download latest release

<script type="text/javascript" src="dist/js/align-blocks.min.js"></script>

Usage

var gallery = new AlignBlocks.Group([
    new AlignBlocks.Item(100, 200, 'http://example.com/1.jpg'),
    new AlignBlocks.Item(200, 100, 'http://example.com/2.jpg'),
    new AlignBlocks.Item(100, 100, 'http://example.com/3.jpg'),
    new AlignBlocks.Item(300, 200, 'http://example.com/4.jpg'),
]);
 
gallery.margin = 15;
 
// extract some of the images into a group
var group = gallery.extract(function (group) {
    return group
        .setHeight(50)
        .horizontalSlice(200)
        .scaleToWidth(200);
});
 
group.items.forEach(function (item) {
    console.log(item.content);
});
 
// Get the remaining items
gallery.items;

License

Copyright (c) 2015, Clippings Ltd. Developed by Ivan Kerin

Under BSD-3-Clause license, read LICENSE file.