stylehatch / photoset-grid Goto Github PK
View Code? Open in Web Editor NEWA simple jQuery plugin to arrange images into a flexible grid, based on Tumblr's photoset feature.
Home Page: http://stylehatch.github.com/photoset-grid/
A simple jQuery plugin to arrange images into a flexible grid, based on Tumblr's photoset feature.
Home Page: http://stylehatch.github.com/photoset-grid/
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?
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.
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?
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
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.
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!
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)
Is there possible to make and introduction for this combination with a callback?
This information would be really helpful.
Best
Sindre
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!
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,
I've a bad behavior in some cases.
Check this codepen: http://codepen.io/dynamick/pen/vNqbXd
Why it doen't work?
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
Images seem to cram together as pages loads. A refresh fixes it sometimes. Inserted a reset.css; which worked temporary.
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.
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.
Nice work.
However, I don't see a licence anywhere.
Under which licence is this plugin released?
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:
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() ...
Is it possible to fix it? Thanks.
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
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.
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.
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.
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.
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.
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
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!
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.
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 live site: http://test-theme-one.tumblr.com/
I added the correct jquery into my tumblr theme, and added the markup to my tumblr posts, but I have two problems.
Any ideas?
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'.
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
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.
Feature Request: Horizontal Grid Layout (1 Row).
May be you have it already in your mind.
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.
There is an example for calculating height of images in row - http://codepen.io/anon/pen/gpMdYo
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
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.
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.
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?
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.
Downloaded the example but none of the photoset images show when index.html is loaded in the browser.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.