jQuery Plugin For Flexible Tumblr Photoset Grid Layout - Photoset Grid

Photoset Grid is a flexible and responsive jQuery Photo Set Grid Layout plugin inspired by Tumblr photoset feature. Photoset Grid plugin will auto rearrange images into a flexible grid using data-layout attributes or a bit javascript.

Basic Usage:

1. Include jQuery library and jQuery Photoset Grid on your web page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.photoset-grid.js"></script>

2. Markup Html Structure. data-layout= 12 1st row has 1 image and 2nd row has 2 images.

<div class="photoset-grid-basic" data-layout="12">
<img src="img/demo/nyc1-500px.jpg" data-highres="img/demo/nyc1-highres.jpg">
<img src="img/demo/nyc2-500px.jpg" data-highres="img/demo/nyc2-highres.jpg">
<img src="img/demo/nyc3-500px.jpg" data-highres="img/demo/nyc3-highres.jpg">
</div>

3. Call the plugin

$('.photoset-grid-basic').photosetGrid({
onComplete: function(){
$('.photoset-grid-basic').attr('style', '');
}
});

4. Options

$('.photoset-grid').photosetGrid({
    layout: '232', // 1st row has 2 images, 2nd row has 3 images, 3rd row has 2 images
    width: '100%', 
    gutter: '5px', // The pixel width between the columns and rows
    highresLinks: true, // Automatically swap out the default image src with the data-highres attribute once the image is wider than lowresWidth. 
    lowresWidth: 300, // Sets the width where the default image is swapped out for the high resolution image. 
    rel: 'gallery-01', // This optional setting useful for lightbox viewers applies a common rel attribute to the anchor tags wrapping the images.

    onInit: function(){},
    onComplete: function(){

        $('.photoset-grid').css({
            'visiblity': 'visible'
        });

    }
});

Change log:

2014-04-09

• Update

---

This awesome jQuery plugin is developed by stylehatch. For more Advanced Usages, please check the demo page or visit the official website.