Responsive Tumblr photosets with jQuery Photoset Grid
jQuery Photoset Grid makes Tumblr photosets resizeable (no more chopped off photosets), breaking the constraints of Tumblr’s own photoset script which can only be set to widths of 250px, 400px, 500px or 700px .
This plugin was originally used internally in Style Hatch’s premium Tumblr themes, but has now being released for free use by the folks at Style Hatch.
Using Photoset Grid: the Basics
The HTML is based on the photoset block, remember to include photosets within the posts block:
{block:Photoset} <div class="photoset" data-layout="{PhotosetLayout}" data-id="photoset{PostID}"> {block:Photos} <img src="{PhotoURL-500}" /> {/block:Photos} {block:Caption} {Caption} {/block:Caption} {/block:Photoset}
Be sure to reference the jQuery library and Photoset Grid plugin in your HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://static.tumblr.com/wgijwsy/jgemkyt9x/jquery.photoset-grid.min.js"></script>
At the most basic level, the jQuery plugin simply has to be called like so:
<script> $('.photoset').photosetGrid(); </script>
By default, the plugin generates a responsive grid without space (gutter) between images.
Be sure to check out the theme documentation to further customize your photoset with options, a lightbox plugin, plus HTML for a Tumblr photoset that links each image.
Download the plugin at Github
Read complete documentation