Question

I would like to create a gallery like Google+ “Photos From Your Circles” in which the thumbnails looks like a collage.

• Thumbnails keeps the aspect ratio of the photo.
• Gallery rows are close in height (not equal but very close).
• Spacing between thumbnails is equal everywhere.
• The gallery fills in a rectangle.
• Photos are not cropped. They’re just resized to fill in the space.

Please see the screenshot as example:
http://ansonalex.com/wp-content/uploads/2011/07/google-plus-gallery-large.jpg

i would like to learn how can i use css/javascript/jquery to style gallery thumbnails like this at the client side programatically.

Thank you for answers!

Answer 1

You may find this write-up helpful: Building a Google Plus Inspired Image Gallery

He uses a technique that does not require sorting the images, and it’s pretty simple. Basically, once you know the width W of your rows of thumbnails, keep placing thumbnails until the total width exceeds W. Let’s say you exceed W by 40px. Now, crop each thumbnail in the row (via css) to remove 40 pixels total.

If, say, you want to crop 10px from an image, you can do it with something like this:

<div style="width:[cropped width]; height:[height]; margin-left:-5px; overflow:hidden;">
  <img style="width:[true width]; height:[height];" src="path/to/thumbnail.jpg" />
</div>

The overflow:hidden crops the image, and the negative margin centers it horizontally, basically.