34 | 
35 | 
36 | 
37 | 
68 | 
69 | 
70 | 
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.
48 | 49 |Demos & Usage
50 | 51 | 52 |Basic Photoset Grid
53 | 58 |
55 | 
56 | 
57 | Simply call photosetGrid(); on a div with the data-layout specified and a number of images inside.
HTML:
61 | 62 |<div class="photoset-grid-basic" data-layout="12">
63 | <img src="img/demo/nyc1-500px.jpg" width="1280" height="960" data-highres="img/demo/nyc1-highres.jpg">
64 | <img src="img/demo/nyc2-500px.jpg" width="500" height="375" data-highres="img/demo/nyc2-highres.jpg">
65 | <img src="img/demo/nyc3-500px.jpg" width="500" height="667" data-highres="img/demo/nyc3-highres.jpg">
66 | </div>Javascript:
69 | 70 |$('.photoset-grid-basic').photosetGrid();
71 | 74 | 75 | 76 |
Custom Options
77 | 82 | 83 |
79 | 
80 | 
81 | 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. Additionally the images in this example do not specify height and width, so the plugin waits for all the images to load before laying out the grid.
84 |HTML:
85 | 86 |<div class="photoset-grid-custom" style="visibility: hidden;">
87 | <img src="img/demo/print1-500px.jpg" data-highres="img/demo/print1-highres.jpg">
88 | <img src="img/demo/print2-500px.jpg" data-highres="img/demo/print2-highres.jpg">
89 | <img src="img/demo/print3-500px.jpg" data-highres="img/demo/print3-highres.jpg">
90 | </div>Javascript:
93 | 94 |$('.photoset-grid-custom').photosetGrid({
95 | // Set the gutter between columns and rows
96 | gutter: '5px',
97 | // Manually set the grid layout
98 | layout: '21',
99 | // Wrap the images in links
100 | highresLinks: true,
101 | // Asign a common rel attribute
102 | rel: 'print-gallery',
103 | // Add a border to each image
104 | borderActive: true,
105 | borderWidth: '3px',
106 | borderColor: '#000000',
107 | borderRadius: '3px',
108 | borderRemoveDouble: false,
109 |
110 | onInit: function(){},
111 | onComplete: function(){
112 | // Show the grid after it renders
113 | $('.photoset-grid-custom').attr('style', '');
114 | }
115 | });
116 | 119 | 120 | 121 |
Adding A Lightbox
122 | 129 | 130 |
124 | 
125 | 
126 | 
127 | 
128 | 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:
133 | 134 |<div class="photoset-grid-lightbox" data-layout="131" style="visibility: hidden;">
135 | <img src="img/demo/withhearts1-500px.jpg" width="1280" height="1707" data-highres="img/demo/withhearts1-highres.jpg">
136 | <img src="img/demo/withhearts2-500px.jpg" width="500" height="663" data-highres="img/demo/withhearts2-highres.jpg">
137 | <img src="img/demo/withhearts3-500px.jpg" width="500" height="500" data-highres="img/demo/withhearts3-highres.jpg">
138 | <img src="img/demo/withhearts4-500px.jpg" width="500" height="500" data-highres="img/demo/withhearts4-highres.jpg">
139 | <img src="img/demo/withhearts5-500px.jpg" width="1280" height="1280" data-highres="img/demo/withhearts5-highres.jpg">
140 | </div>Javascript:
143 | 144 |$('.photoset-grid-lightbox').photosetGrid({
145 | highresLinks: true,
146 | rel: 'withhearts-gallery',
147 | gutter: '2px',
148 |
149 | onComplete: function(){
150 | $('.photoset-grid-lightbox').attr('style', '');
151 | $('.photoset-grid-lightbox a').colorbox({
152 | photo: true,
153 | scalePhotos: true,
154 | maxHeight:'90%',
155 | maxWidth:'90%'
156 | });
157 | }
158 | });
159 | 163 | 164 | 165 |
Adding Photoset Grid to Tumblr Themes
166 | 167 |HTML:
168 | 169 |{block:Photoset}
170 | <div class="photoset-grid" data-layout="{PhotosetLayout}" data-id="photoset{PostID}">
171 | {block:Photos}
172 | <img src="{PhotoURL-500}"
173 | {block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}
174 | width="{PhotoWidth-500}" height="{PhotoHeight-500}"
175 | {block:Caption}alt="{Caption}"{/block:caption} />
176 | {/block:Photos}
177 | </div>
178 |
179 | {block:Caption}
180 | {Caption}
181 | {/block:caption}
182 | {/block:Photoset}Javascript:
185 | 186 |$('.photoset-grid').photosetGrid({
187 | highresLinks: true,
188 | rel: $('.photoset-grid').attr('data-id'),
189 | gutter: '5px',
190 |
191 | onComplete: function(){}
192 | });
193 | Usage
197 |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.
As an option you can set the height and width attributes on all the images to instantly layout the grid, otherwise the plugin will wait for all images to load.
Understanding data-layout:
203 | 204 |-
205 |
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.
206 | data-layout="13"1st row has 1 image and 2nd row has 3 images.
207 |
Arguments:
210 | 211 |-
212 |
width-stringChange the width that the photo set grid will be rendered at. Default:100%automatically fits its container for responsive layouts
213 | layout-stringManually set a string of numbers to specify the number of images each row contains. Default:nullgenerates a stacked layout of one image per row
214 | gutter-stringSet the pixel width between the columns and rows. Default:0px
215 | highresLinks-booleanSet totrueto automatically swap out the default imagesrcwith thedata-highresattribute once the image is wider thanlowresWidth. This will also wrap each image with anavs.divelement. Default:false
216 | lowresWidth-numberSets the width where the default image is swapped out for the high resolution image. Default:500
217 | rel-stringThis optional setting useful for lightbox viewers applies a common `rel` attribute to the anchor tags wrapping the images. Default:''
218 | borderActive-booleanThis optional setting is used to wrap each image with a border. Default:false
219 | borderWidth-stringDefine the width of the border wrapping each image. Default:'5px'
220 | borderColor-stringDefines the color used for the border wrapping each image. Default:'#000000'
221 | borderRadius-stringDefines the border radius of the border wrapping each image. Default:'0'
222 | borderRemoveDouble-booleanIf the gutter is set to 0px (or not specified) then this option can be used to remove double borders that would occur between each row/cell. Default:false
223 | onInit-functionDefine a function to be called when the plugin is initialized.
224 | onComplete-functionDefine a function to be called when the plugin has completed the grid layout.
225 |
Installation
228 | 229 |Bower package manager
230 | 231 |You can easily install photoset-grid as a Bower package by running:
232 | 233 |$ bower install photoset-gridCredits
236 | 237 |-
238 |
- Jonathan Moore - @moore | jonathanmoore.com 239 |
- Mikey Wills - @mukealicious | muke.me 240 | 241 |
- Additional
242 |
-
243 |
- Thomas Sardyha & David DeSandro - desandro/imagesloaded 244 |
- Louis-Rémi Babé - louisremi/jquery-smartresize 245 |
247 |
327 |
328 |
329 |
330 |
331 |
--------------------------------------------------------------------------------
/jquery.photoset-grid.js:
--------------------------------------------------------------------------------
1 | /**
2 | * photoset-grid - v1.0.1
3 | * 2014-04-08
4 | * jQuery plugin to arrange images into a flexible grid
5 | * http://stylehatch.github.com/photoset-grid/
6 | *
7 | * Copyright 2014 Jonathan Moore - Style Hatch
8 | */
9 |
10 | /*jshint browser: true, curly: true, eqeqeq: true, forin: false, immed: false, newcap: true, noempty: true, strict: true, undef: true, devel: true */
11 | ;(function ( $, window, document, undefined ) {
12 |
13 | 'use strict';
14 |
15 | // Plugin name and default settings
16 | var pluginName = "photosetGrid",
17 | defaults = {
18 | // Required
19 | // set the width of the container
20 | width : '100%',
21 | // the space between the rows / columns
22 | gutter : '0px',
23 |
24 | // Optional
25 | // wrap the images in a vs. div and link to the data-highres images
26 | highresLinks : false,
27 | // threshold for the lowres image, if container is > swap the data-highres
28 | lowresWidth : 500,
29 | // relational attr to apply to the links for lightbox use
30 | rel : '',
31 |
32 | // add a border to each image
33 | borderActive: false,
34 | // set border width
35 | borderWidth: '5px',
36 | // set border color
37 | borderColor: '#000000',
38 | // set border radius
39 | borderRadius: '0',
40 | // if true it will remove "double" borders
41 | borderRemoveDouble: false,
42 |
43 | // Call back events
44 | onInit : function(){},
45 | onComplete : function(){}
46 | };
47 |
48 | // Plugin constructor
49 | function Plugin( element, options ) {
50 | this.element = element;
51 | this.options = $.extend( {}, defaults, options );
52 |
53 | this._defaults = defaults;
54 | this._name = pluginName;
55 |
56 | this.init();
57 | }
58 |
59 | Plugin.prototype = {
60 |
61 | init: function() {
62 | // Call the optional onInit event set when the plugin is called
63 | this.options.onInit();
64 |
65 | this._setupRows(this.element, this.options);
66 | this._setupColumns(this.element, this.options);
67 |
68 | },
69 |
70 | _callback: function(elem){
71 | // Call the optional onComplete event after the plugin has been completed
72 | this.options.onComplete(elem);
73 | },
74 |
75 | _setupRows: function( elem, options ){
76 | // Convert the layout string into an array to build the DOM structures
77 | if(options.layout) {
78 | // Check for layout defined in plugin call
79 | this.layout = options.layout;
80 | } else if($(elem).attr('data-layout')) {
81 | // If not defined in the options, check for the data-layout attr
82 | this.layout = $(elem).attr('data-layout');
83 | } else {
84 | // Otherwise give it a stacked layout (no grids for you)
85 | // Generate a layout string of all ones based on the number of images
86 | var stackedLayout = "";
87 | var defaultColumns = 1;
88 | for (var imgs=0; imgs<$(elem).find('img').length; imgs++ ) {
89 | stackedLayout = stackedLayout + defaultColumns.toString();
90 | }
91 | this.layout = stackedLayout;
92 | }
93 |
94 | // Dump the layout into a rows array
95 | // Convert the array into all numbers vs. strings
96 | this.rows = this.layout.split('');
97 | for (var i in this.rows ) {
98 | this.rows[i] = parseInt(this.rows[i], 10);
99 | }
100 |
101 | var $images = $(elem).find('img');
102 | var imageIndex = 0;
103 |
104 | $.each(this.rows, function(i, val){
105 | var rowStart = imageIndex;
106 | var rowEnd = imageIndex + val;
107 |
108 | // Wrap each set of images in a row into a container div
109 | $images.slice(rowStart, rowEnd).wrapAll('');
110 |
111 | imageIndex = rowEnd;
112 | });
113 |
114 | $(elem).find('.photoset-row:not(:last-child)').css({
115 | 'margin-bottom': options.gutter
116 | });
117 | },
118 |
119 | _setupColumns: function( elem, options ){
120 |
121 | // Reference to this Plugin
122 | var $this = this;
123 |
124 | var setupStyles = function(waitForImagesLoaded){
125 | var $rows = $(elem).find('.photoset-row');
126 | var $images = $(elem).find('img');
127 |
128 | // Wrap the images in links to the highres or regular image
129 | // Otherwise wrap in div.photoset-cell
130 | if(options.highresLinks){
131 | $images.each(function(){
132 | var title;
133 | // If the image has a title pass it on
134 | if($(this).attr('title')){
135 | title = ' title="' + $(this).attr('title') + '"';
136 | } else {
137 | title = '';
138 | }
139 | var highres;
140 | // If a highres image exists link it up!
141 | if($(this).attr('data-highres')){
142 | highres = $(this).attr('data-highres');
143 | } else {
144 | highres = $(this).attr('src');
145 | }
146 | $(this).wrapAll('