Centering Images?

[Elementax]

Hey,

Recently I've created a site with a gallery feature where images are placed throughout the entire page, and depending on the users browser size, the number of columns of images will either decrease or increase. A site with a similar feature is: pinterest.com. Basically, I added 50px margins on both the left and right side of the page so the images, header and other components of the site aren't right against the edge. The problem occurs when I begin to reduce the size of my browser. The header / footer and the rest of the content decreases in size like it should, but the images get pushed down and it ruins the layout.

For example, the site has 4 columns of images and it is aligned on both the right / left side with the header and footer contents, but as soon as the browser decreases so 4 columns no longer fit and 3 are required, there is now a big gap on the right side of the page, however the header and footer still remains 50px from the side of the browser. What I'm trying to figure out, is how would I make it similar to the site above (pinterest) so that when the page is reduced in size so only say...3 columns of images can fit, the images will be aligned in the center of the page and the header and footer will be forced to align with the images.

If you are not 100% sure on what I'm asking, take a look at pinterest and reduce your browser window size. As you probably noticed, when you reduce the size and all the current columns can fit anymore, the number of columns gets reduced, but unlike my site currently, there isn't a huge white space on the right side, the whole layout gets centered and the header / footer align with the current number of columns.

Haha, just realized I kind of wrote a lot there, I aplogize, just trying to be clear.

But basically, if you don't want to read the entire post, I'm trying to replicate how pinterest scales the image gallery. When the browser window is reduced, the number of columns of images reduce as well, but unlike my site (with a huge open space when the image gets pushed to next line), the pinterest site centers its layout and the header / footer / images all align nicely until the browser window is reduced / increased again to the next set of columns, at which point it does it again.

Thanks,

Elementax

[ralph.m]

You can do this with CSS alone by using @media rules and setting breakpoints at which columns are re-ordered and re-centered, as it were.

[Elementax]

Hey Folks,

Is there a 'good' way to evenly space images in a gallery-like site (similar to pinterest) using Javascript / Jquery (or anything really)? For example, if my page has a width of 960px, and I have 4 columns of photos. What I'm trying to do is get the far left and right images to be directly against the edge of the width. If you were to give the images a margin-left value or margin-right, it would work for everything but that last image, which would ruin the layout.

Here is an example jsfiddle for my desired result, however the creator has used CSS / html and it doesn't seem to work correctly all the time. http://jsfiddle.net/thirtydot/EDp8R/3/

Also, you can see it on http://www.pinterest.com and tumblr, and most other image related sites. Essentially, the images are evenly spaced, but are right against the end of the wrapper on both sides.

I'm assuming there is a fix in js where the spacing can be calculated? However I haven't been able to find it yet

Thanks,

Elementax

[Stomme poes]

Well, you can do this in CSS for most browsers, so I would figure if you want to do with with javascript, you'd pretty much follow the same formula.

With CSS, you'd set a % width on your photo boxes, based on number per row. So if 5 in a row, width is something less than 20% (room for the margin).
Then initially everyone gets a margin. Let's say left margin.

With CSS you would count the items, and every nth item would NOT have the margin. So if there were 3 in a row, the first and every third after it, being the one on the left, would not have the left margin (like, in a ul, li:nth-child(3n+1).

You could use Javascript or jQuery to count through the items and either manually add in the appropriate CSS or have it add a class where your external stylesheet removed the margin.

So for example

$('#gallery li:nth-child(3n+1)').css(marginLeft, '0');

What Pinterest seems to do is use Javascript to manually place every single individual element using absolute positioning. I have no idea why someone would want to do it this way, but I have seen it on quite a few e-commerce sites, on pages showing multiple products. I think simply giving everyone a margin and then remove from whoever's on the edge is more elegant.

You could go further: calculate the width of the container with jQuery, divide it by the number of items per row, remove from that total however much total margin you want between elements, set that as the new element width, set the margins to your calculated margin width, and if you use percents you could have your elements growing and shrinking a bit to ensure they are always absolutely filling all the space, if your container is flexible to the viewport.

[Elementax]

Well, you can do this in CSS for most browsers, so I would figure if you want to do with with javascript, you'd pretty much follow the same formula.

With CSS, you'd set a % width on your photo boxes, based on number per row. So if 5 in a row, width is something less than 20% (room for the margin).
Then initially everyone gets a margin. Let's say left margin.

With CSS you would count the items, and every nth item would NOT have the margin. So if there were 3 in a row, the first and every third after it, being the one on the left, would not have the left margin (like, in a ul, li:nth-child(3n+1).

You could use Javascript or jQuery to count through the items and either manually add in the appropriate CSS or have it add a class where your external stylesheet removed the margin.

So for example

$('#gallery li:nth-child(3n+1)').css(marginLeft, '0');

What Pinterest seems to do is use Javascript to manually place every single individual element using absolute positioning. I have no idea why someone would want to do it this way, but I have seen it on quite a few e-commerce sites, on pages showing multiple products. I think simply giving everyone a margin and then remove from whoever's on the edge is more elegant.

You could go further: calculate the width of the container with jQuery, divide it by the number of items per row, remove from that total however much total margin you want between elements, set that as the new element width, set the margins to your calculated margin width, and if you use percents you could have your elements growing and shrinking a bit to ensure they are always absolutely filling all the space, if your container is flexible to the viewport.

Ah, this method does seem a lot more effective and I was able to get it going fairly easily.

Thanks a ton for the help

[Stomme poes]

Since I hadn't seen the other question, you can combine ralph's answer with mine: let the width of the thingies in the row be able to squish and grow a bit with a % width, but under some minimum size, let either a media query or Javascript drop the number of items in the row.

I noticed my screen isn't wide enough to see much action on Pinterest: I got a one-time drop of row-items, then a scrollbar and it remained at 4 item.