stylehatch / photoset-grid Goto Github PK

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

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.

Could it be the well vertically . this Style

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

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.

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

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.

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.

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.

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

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.

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.

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.

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

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?

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

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!

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!

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

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();
  }
});

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

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

Best
Sindre

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.

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.

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.

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!

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?

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

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.

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?

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

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)

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.

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

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

Why it doen't work?

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

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/

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

Hi,
is possible to setup a new grid system?

I would like something like below:

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.

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

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

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?

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.

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

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.