stylehatch/photoset-grid

A simple jQuery plugin to arrange images into a flexible grid, based on Tumblr's photoset feature.

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

Demo

View the photoset grid Github page for all the examples or jump straight to the following demos:

• Basic usage
• Custom options
• Adding a lightbox viewer
• Using photoset grid in a Tumblr theme

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.

If all of the images in a photoset set both a height and a width, the layout of the grid is triggered immediately before all of the images load. Otherwise imagesLoaded is used to wait for all of the images to load in.

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.

Basic Usage

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

HTML:

<div class="photoset-grid" data-layout="13">
	<img src="image1.jpg">
	<img src="image2.jpg">
	<img src="image3.jpg">
	<img src="image4.jpg">
</div>

Javascript:

$('.photoset-grid').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.

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.
• borderActive - boolean This optional setting is used to wrap each image with a border. Default: false
• borderWidth - string Define the width of the border wrapping each image. Default: '5px'
• borderColor - string Defines the color used for the border wrapping each image. Default: '#000000'
• borderRadius - string Defines the border radius of the border wrapping each image. Default: '0'
• borderRemoveDouble - boolean If 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
• 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.

HTML:

<div class="photoset-grid" style="visibility: hidden;">
	<img src="image1.jpg" data-highres="highres-image1.jpg">
	<img src="image2.jpg" data-highres="highres-image2.jpg">
	<img src="image3.jpg" data-highres="highres-image3.jpg">
	<img src="image4.jpg" data-highres="highres-image4.jpg">
	<img src="image5.jpg" data-highres="highres-image5.jpg">
	<img src="image6.jpg" data-highres="highres-image6.jpg">
	<img src="image7.jpg" data-highres="highres-image7.jpg">
</div>

Javascript:

$('.photoset-grid').photosetGrid({
	layout: '232',
	width: '100%',
	gutter: '5px',
	highresLinks: true,
	lowresWidth: 300,
	rel: 'gallery-01',
	borderActive: true,
	borderWidth: '3px',
	borderColor: '#000000',
	borderRadius: '3px',
	borderRemoveDouble: false,

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

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

	}
});

Installation

Bower package manager

You can easily install photoset-grid as a Bower package by running:

$ bower install photoset-grid

Credits

• Jonathan Moore - @moore | jonathanmoore.com
• Mikey Wills - @mukealicious | muke.me
• Additional
  • Thomas Sardyha & David DeSandro - desandro/imagesloaded
  • Louis-Rémi Babé - louisremi/jquery-smartresize

MIT License

Copyright (c) 2013 Style Hatch, Inc

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

photoset-grid's Issues

Problem with adding colorbox in onComplete function.

Hi, thanks for sharing this great script.
I am trying to define colorbox on the onComplete function, but cannot get it to work.
When i check $(".highres-link") with console log I see that the link cannot be find. I hope you can tell me how to define colorbox.

 $('.photo-slideshow').photosetGrid({
     gutter: '5px',
     highresLinks: true,
     lowresWidth: 500,
     onInit: function() {},
     onComplete: function(){
         console.log($(".highres-link"));
         $(".highres-link").colorbox({
             transition:"fade",
             maxHeight: "90%",
             maxWidth: "90%"
         });
     }
});

Thanks in advance.
Diederik

Doesn't play well with page spinner and Bootstrap tabs, shows sliced off images

Photoset-grid with Paul Irish infinite-scroll?

Is there possible to make and introduction for this combination with a callback?
This information would be really helpful.

Best
Sindre

Mobile resize wrong if images loaded from URL

If the photoset images are loaded from a URL, instead of local storage, the photoset images shrink and overlap at less than 480px, instead of being resized. To see this problem just replace the images in the download demo folder with images loaded from the web, e.g.

<img src="http://lorempixel.com/600/400/sports/1" width="600" height="400" alt="title" data-highres="">

Not sure why this is or how to fix it.

I created a codepen to illustrate it but it does not work, not even the photoset layout;
Anyway, here it is, in case anyone wants to try it:

http://codepen.io/intermedion/pen/uJayC

Not working on mobile devices

When loading a page using the plugin, images are shown but once script is loaded, images dissapear.

En example here http://www.cabezasreducidas.es/post/76208979159/demigrancia-mascotil#disqus_thread

Used iPhone 5S with Safari browser.

Why are some images like this, like see the second one?

http://d.pr/i/6YRL

Wrong HTML rendering

Not sure, what's the problem, but my photoset-grid does not make its HTML correctly. It starts with photoset-row elements and after two rows, switches to photocell-grid.

So the container stops breaking the clear correctly after the fourth image, thus it doesn't get the correct container height and all elements I paste after the gallery, will be hidden by the fifth image.

Following image demonstrates the outer bounds of the container where the images life in.

Photoset doubles column size issue

Hey there,

Is there a way I can adjust the height of the columns in my photoset? When my tumblr loads it appears each image is being doubled beneath it. To understand what's happening here's a link to my tumblr. Everything seems to be in place when I resize the window. I inspected the element and I saw that I can adjust the column height but once I try to add the change it gets overridden. Need help PLEASE!!!!

iamaziz2000.tumblr.com

Isn't responsive

Is there a plan to make it responsive?
The main problem I see is with setting the width to 100% of images who have a 1:2 aspect ratio.

Why "Adding a buffer to shave off a few pixels in height"?

Which is the reason for shaving 2,5% of height? An image may have an important detail there, so I would like to know if you have a good reason for doing so, as I cannot guess one.

Images cram together on load

Images seem to cram together as pages loads. A refresh fixes it sometimes. Inserted a reset.css; which worked temporary.

Something pushing images in multi-image rows to next line

See attached screenshot. There's no CSS I can find that's clearing: both or anything like that. Any reason why this might be doing this?

Attempting to integrate it into the Mason Tumblr theme: http://mikedidthis-mason.tumblr.com/

Here's the slightly modified code I'm using to call photosets: http://jsbin.com/unawif/2/edit

And here's the original live post shown in the screenshot below, though I've reverted to the original method of calling photosets for now: http://jruck.us/post/48214282470

Bad height calculation

Hi,
I've a bad behavior in some cases.

Check this codepen: http://codepen.io/dynamick/pen/vNqbXd

Why it doen't work?

Photoset grid's in tumblr TEXT posts?

I added the correct jquery into my tumblr theme, and added the markup to my tumblr posts, but I have two problems.

1. Tumblr erases the 'data-layout' when I save my tumblr post.
2. Having more than one photo set-grid per page messes them up

Any ideas?

Cannot run the example

Hi,
First, thank you for the amazing work.

I just try your example by downloading the zip file. After extracting and run index.html, here is the result:

I wonder if there are some scripts not fully loaded.

One more thing, I tried it with my phone gap project, and the result is the same. Could you suggest the solution for this?

Again, thank you!

Different grid

Hi,
is possible to setup a new grid system?

I would like something like below:

no custom style possible on photoset grid

hey
no style seems to work on images in photoset grid. i tried to add image shadows, text overlays, nothing seems to work correctly.

like doing text overlays, positioning the div(photoset-grid-custom) "relative" and applying "absolute" over text, breaks the entire grid position towards some point over the page.

box-shadow over images doesnt display anything over it.

how to resolve such an issue. @bryancaudle @jonathanmoore @krisnicolemoore @mukealicious @stylehatch

Switchable Demo

It might be nice if we created a switchable demo, so the layout of the grid could be switched on the fly. Maybe just a few selectable buttons above the grid.

Limit to data layout amount

We noticed that there could be a bug when using a value in the data layout that exceeds 19. At 20 numbers in a row, the field defaults to this:

What I have at 19:
212122212122212121

What I have at 20:
2121222121222121212

When I save:
9223372036854775807

This could just be a quirk, or we could simply stay below 19 numbers in the data layout.

Thoughts?

Photoset images not visible

Downloaded the example but none of the photoset images show when index.html is loaded in the browser.

Images are sometimes positioned incorrectly on Firefox

On Firefox 21, I'm seeing gaps in the grid where images are being incorrectly positioned for some reason. Problem can be replicated in this jsfiddle: http://jsfiddle.net/jasonschock/dd9WT/

If I change jsfiddle to fire my script onLoad instead of OnDomready, then the problem goes away. I don't see this problem on Chrome, so seems to be something specific to Firefox and perhaps image load events.

Vertical centering of images in grid

Thanks for your great plugin.

But I have small issue with vertical centering of images in grid row. Problem is in function for finding height of row - resizePhotosetGrid() ... $shortestImg ... $(this).find('img').each(function(){... If we have two images in a row, where first image have dimensions for e.g. w:700, h:525 and second image w:800, h:575... and these dimensions are stored as attribute in IMG tag. So if images are resized into cells by css rule 'width: auto;', for e.g. width of cell 300px, they have dimensions w:300 x h:225 for first image and w:300 x h:215 for second image. Problem is row height, which is set by first image, because first image has the shortest original height. This causes that second image has some white space above and below. I think, problem is in searching the shortest image, where is used attribute of image, where is original height, but there should be used jquery .height() function for getting actual height of image, which is resized into cell by css 'width:auto;' rule.

Is it possible to fix it? Thanks.

Problem with plugin on initial load, works fine after subtle resize

Hey, great plugin man. The plugin is being used in its normal mode, and this GIF demonstrates the issue.

http://i.imgur.com/hkgFNO2.gif

Basically, when the page loads, the photos are not expanded, rather stacked weirdly.

A subtle resize of the browser window fixes that.

Any ideas what's happening? Quite frustrating.

Reaction for issue #51

There is an example for calculating height of images in row - http://codepen.io/anon/pen/gpMdYo

Repeating Layout Patterns

Hey, thanks for this great plugin.

I was thinking it might be nice to allow specifying a short layout pattern which is then repeated, regardless of the number of images.

So if I defined the layout pattern as 3121, then the plugin would loop through that pattern until all the images have been used.

I'm working around it at the moment by defining a really long string, which should account for most cases. If there's a better way to do this, I'd be happy to hear it.

Thanks.

change responsive behaviour ; usage for div elements

hey
is there a way to change the display of photoset with changing viewport. presently it scales down the image size based on the viewport. any way to align all images vertically when a breakpoint is reached.

also can it be used/modified to use for div elements.

does this have any specific browser limitations.

@bryancaudle @jonathanmoore @krisnicolemoore @mukealicious @stylehatch would appreciate responses

Gutter not working between rows

For some reason I'm only getting a gutter between columns, now rows. Example:

Here is the code I'm using:

$('#results').html(s).photosetGrid({
  gutter:'15px',
  onComplete:function() {
    $('#results').show();
  }
});

Non-standart photo resolution

Good day.
When I try to add a photo with non-standart (non-square) "width-heigth" properties I found myself that I can't do anything with resolution with "height" property.
Am I right that I can manipulate only width param at your module?
P.S. This is my very first issue, so I hope, that you will understand me correctly.

Horizontal Layout Support

Feature Request: Horizontal Grid Layout (1 Row).
May be you have it already in your mind.

Photosets don't show up when using Safari 8.0.7

When using safari, photosets don't show up because their height is being set to 0px in resizePhotosetGrid() in jquery.photoset-grid.js

I've looked into it and found that line 248: var $shortestImg = $(this).find('img:eq(0)'); returns something different in Safari and therefore the $shortestImg.css('width'), 10) will return 0 and set the whole rowHeight to 0, which in turn sets bufferHeight to 0, and therefore $(this).height( rowHeight - bufferHeight ); sets the height to 0.

Verticaly ?

Could it be the well vertically . this Style

Safari zero row height bug

Tested on safari 7.1.7(mac) and iOS safari(8.2, 7.0). All .photoset-row getting 0px height, so grid is invisible.

Error some here:

// Get the row height from the calculated/real height/width of the shortest image
var rowHeight = ( $shortestImg.attr('height') * parseInt($shortestImg.css('width'), 10) ) / $shortestImg.attr('width');

// Adding a buffer to shave off a few pixels in height
var bufferHeight = Math.floor(rowHeight * 0.025);
$(this).height( rowHeight - bufferHeight );

If completely remove last line from this snippet - all seems to be working well.

infinity layout

Hey,
I really love your work, but it would be awesome to create "infinity layout" maybe there is option for this, but I haven't found it (I bet that I'm blind...).

For example I wanna have 5 images in the first and 4 images in the second row. Now I have something like this - http://northys.github.io/Kittens/ - check the source and value of data-layout="" :-D

Images disappearing from rows in IE7

Was debugging one of my sites in IE7 when I noticed that the right side images are disappearing when more than one image appear in a row.

Here you can see a screenshot of the photoset-grid site doing the same thing. This is running in IE7 in Vista using Parallels on Mac and Microsoft's virtual machine download from http://www.modern.ie/en-us/virtualization-tools

Incorrect layout on various heights

I'm having a problem regarding layouts with images of different heights in a row - sometimes the grid is correctly laid out, other times the row height isn't calculated from the smallest image in that row. Please see the following pen:

http://codepen.io/anon/pen/QydvpB#0

I can't seem to find a reason why it randomly breaks - for example, the third image in grid one will break when its height is set to anything lower than the current 125px (try 124), but it works when you set its height between 12 - 25px. Set it to 11px and it breaks again.

Licence

Nice work.
However, I don't see a licence anywhere.
Under which licence is this plugin released?

Algorithm for randomly generating layouts based on N number of images?

Rails Assets integration

Hi.
I'd like to install photoset-grid using rails assets, which fetches bower package and builds rails gem.
However rails assets seems to fail in building photoset-grid as version tag in this repository is missing.
Can you please add a tag for the current version?

FYI, you can check the building status of proxied gem here: https://rails-assets.org/components/new

Thanks!

Suggestion: Add open/closed state on top containter

Add a CSS class on the top most container when a child is opened/zoomed. This makes it easier to add custom CSS styles on all children.

An example: I want to disable the overflow: hidden for all children when an image is open since the this property breaks my medium.com styled lightbox.

stackedLayout Grid

I'm having trouble understanding the layout string. I continue to get a stackedLayout even though I've defined the data-layout in the div. I've multiple pages using the grid and I'm not sure if the rows need to be defined in jquery.photoset-grid.js. I had this issue previously but updated the jQuery to be in compliant with imagesloaded.js and the issue went away but has recently came back.

My data-layout strings for two different pages are '1313131313131313' and '21221'.

Setting dual dimensions for high resolution image and thumb image differently.

This is an interesting one. Currently, Photoset-Grid supports a single dimension data attributes (width and height) to render how the high resolution photos will be shown in the lightbox. This is tied to how the plugin renders the thumbs too.

Now if the thumb and high resolution photo are in the same dimensions, it works fine. But this affects the entire grid if one photo has a weird aspect ratio. What if we want the thumbs to be of a fixed set dimensions (and this will be generated using Cloudinary's image transform API) .

This will make the Photoset much more aligned with other photos since they will have the same thumb dimensions, but the Photoset-Grid plugin creates issues since changing the dimension on the image tag effects how the high resolution image is rendered.

How do I resolve this. I want to be able to set dual dimensions so the plugin knows that these dimensions are reserved for rendering the thumb impression and should not be fed of from the original aspect ratio of the high resolution image.

Optional adding a caption to the images in the grid.

Hello this is more an enhancement than an issue. I would like to know if that is possible to have a text wrapped by span tags or something to give some text to the images. It would be nice if the text is not over the image but at the bottom so that you can put a title and an small description. Of course all images should have that... Thats why it would be optional.

I've been trying to do it but with no luck.

Thanks for the plugin it is very nice!

Incorrect width for 3 columns

Hello,

First I want to mention that this is a very helpful plugin, I'll be using it for my premium themes.

Anyway, just wanted to give a little advice - when we use percentage values to set CSS width it is a good practice to use 8 digits after the decimal for higher accuracy. So each photo in the 3 column photoset should have width of 33.33333333% instead of just 33.3% (take a look at boostrap.css).

Currently on a 1140 container the exact width is 1138.821 which gives visual difference from 1 to 2 pixels depending on the browser. With 33.33333333% the width will be exactly 1140 pixels with no visual difference.

This feature is supported by all modern browsers and old browsers fall back to rounder numbers.

Adding an a-tag in the <img> list messes up the plugin..

I need to wrap all my images in an anchor tag, and having anything other than an in the photoset-grid div messes it up...

Here is my screenshot

here is my live site: http://test-theme-one.tumblr.com/

Row with 5+ cols

Perhaps it's just my setup, but using 6-7-8-9 (5+) for a row renders only one column with only the first image visible at full size. The rest of the images loaded in the DOM but aren't visible.

Also, is there a way to use more than 9 images in a row?

Optional imagesLoaded

Make the imagesLoaded functionality optional for markup where the height and widths are specified. No more preloading the images before the grid can render!

Ref Issue #11 comment by @matthewbuchanan - #11 (comment)

Clicking third image opens up first image?

Why is this happening Mr. Moore. If I have 3 images in a row, and I click the third one, it opens the first one. I see that it is wrapping the link on the entire div row instead of the individual image. How do I fix this?