SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Centering Images?

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Fluid width with evenly spaced images?

    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

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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
    Code:
    $('#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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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
    Code:
    $('#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

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •