jQuery Plugin For Flexible Tumblr Photoset Grid Layout - Photoset Grid

File Size: 5.23 MB
Views Total: 5500
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

3. Call the plugin

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

4. Options

    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(){

            'visiblity': 'visible'


Change log:


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