Photoset Grid - arrange images into a flexible grid

A simple jQuery plugin to arrange images into a flexible grid, based on Tumblr's photoset feature. Originally the plugin was created for our Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts, but we have since expanded it for use outside of the themes.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Usage

Apply the photo set grid layout to a selected div containing images for the grid.

The only markup requirement is a data-layout attribute on the selected div. data-layout should contain a string of numbers representing the number of columns for each row.

UNDERSTANDING DATA-LAYOUT:

• data-layout="2331" 1st row has 2 images, 2nd row has 3 images, 3rd row has 3 images, and 4th row has 1 image. Total of 9 images.
• data-layout="13" 1st row has 1 image and 2nd row has 3 images.

Arguments:

• width - string Change the width that the photo set grid will be rendered at. Default: 100%automatically fits its container for responsive layouts
• layout - string Manually set a string of numbers to specify the number of images each row contains. Default: null generates a stacked layout of one image per row
• gutter - string Set the pixel width between the columns and rows. Default: 0px
• highresLinks - boolean Set to true to automatically swap out the default image src with the data-highres attribute once the image is wider than lowresWidth. This will also wrap each image with an a vs. div element. Default: false
• lowresWidth - number Sets the width where the default image is swapped out for the high resolution image. Default: 500
• rel - string This optional setting useful for lightbox viewers applies a common `rel` attribute to the anchor tags wrapping the images. Default: ''
• onInit - function Define a function to be called when the plugin is initialized.
• onComplete - function Define a function to be called when the plugin has completed the grid layout.

BASIC PHOTOSET GRID

Simply call photosetGrid(); on a div with the data-layout specified and a number of images inside.

HTML:

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

JAVASCRIPT:

$('.photoset-grid-basic').photosetGrid();

CUSTOM OPTIONS

Beyond the basic usage, you can set a number of optional arguments including callback functions that are useful for adding a lightbox for high resolution images.

HTML:

<div class="photoset-grid-custom" style="visibility: hidden;">
  <img src="img/demo/print1-500px.jpg" data-highres="img/demo/print1-highres.jpg">
  <img src="img/demo/print2-500px.jpg" data-highres="img/demo/print2-highres.jpg">
  <img src="img/demo/print3-500px.jpg" data-highres="img/demo/print3-highres.jpg">
</div>

JAVASCRIPT:

$('.photoset-grid-custom').photosetGrid({
  // Set the gutter between columns and rows
  gutter: '5px',
  // Manually set the grid layout
  layout: '21',
  // Wrap the images in links
  highresLinks: true,
  // Asign a common rel attribute
  rel: 'print-gallery',

  onInit: function(){},
  onComplete: function(){
    // Show the grid after it renders
    $('.photoset-grid-custom').attr('style', '');
  }
});

ADDING A LIGHTBOX

This demonstration of the photoset grid uses the onComplete event to assign a lightbox plugin to view the high resolution images. The code below is specific to jquery.colorbox.js, but it should work virtually the same for other plugins.

HTML:

<div class="photoset-grid-lightbox" data-layout="131" style="visibility: hidden;">
  <img src="img/demo/withhearts1-500px.jpg" data-highres="img/demo/withhearts1-highres.jpg">
  <img src="img/demo/withhearts2-500px.jpg" data-highres="img/demo/withhearts2-highres.jpg">
  <img src="img/demo/withhearts3-500px.jpg" data-highres="img/demo/withhearts3-highres.jpg">
  <img src="img/demo/withhearts4-500px.jpg" data-highres="img/demo/withhearts4-highres.jpg">
  <img src="img/demo/withhearts5-500px.jpg" data-highres="img/demo/withhearts5-highres.jpg">
</div>

JAVASCRIPT:

$('.photoset-grid-lightbox').photosetGrid({
  highresLinks: true,
  rel: 'withhearts-gallery',
  gutter: '2px',

  onComplete: function(){
    $('.photoset-grid-lightbox').attr('style', '');
    $('.photoset-grid-lightbox a').colorbox({
      photo: true,
      scalePhotos: true,
      maxHeight:'90%',
      maxWidth:'90%'
    });
  }
});