Tableless Image Gallery – An Experiment of Fluid Grid

Today I want to build a tableless image gallery. The motivation came from a web project I am currently doing. In one of the web pages I am coding, I need to make a grid layout and put image thumbnails in it. I started off by using table to layout the grid. Although it turned out nicely, the gallery itself is not very friendly to DOM manipulation. For instance, when removing a table cell during a delete operation using Ajax, a hole remains in the gallery.

I told myself that there must be a better way to do this. So I started experimenting tableless grid layout. It took me a while, but I am quite satisfied by the result. You can take a look how the finish product looks like or download sample layout files. For illustration of deletion using Ajax, I used jQuery to perform a simple DOM removal operation, which removes a clicked cell off the grid. While you are testing the online example, look closely how the gap is being filled when a cell is removed. I've tested it in IE 6 and Firefox 2.0.0.7, and both worked like a charm.

The Grid Layout Markup

Below is a basic skeleton of the grid in HTML. The outer DIV functions as a container, which contains two cells (a cell is denoted by CSS class imageSingle):

I added two DIVs to each image cells. The first DIV is used to hold image thumbnail, and the other is used to hold image caption.

The Style Sheet

We now have the structure for our layout, it is time to make it looks like the way we want it. I created the following style sheet, the same style sheet I used for the online demonstration of this article:

Among styles above, the most essential one is float:left in albumSingle. By setting floating to left, album cells will magically align side-by-side with its sibling. The beauty of floating layout is that it can well adapt to variety of width without creating a horizontal scrollbar.

You can easily create your own theme by changing around the background or border color, font style, width and height of the image cell.

One last thing: don't forget to clear the float since the whole grid layout is floating to the left. You can clear the float by adding this line to the end of the grid layout:

Related Reading

Download Sample Files

Tableless Image Grid Files

6 Comments Tableless Image Gallery – An Experiment of Fluid Grid

  1. Scott Harvey

    The one major limitation with this type of grid is if you have a caption that takes a couple of lines or a tall image the layout will break.

    This has been the main reason why I have stuck with using table for this type of thing, do you have a solution for this?

  2. Deborah Whipp

    I love this and am using it on a site I'm working on. However, one of my images has a 3-line caption while the rest have 2 and this does result in a gap.

    Here's the css I'm using:

    .album{ width:100%; background-color:#ffffff; padding:0px; float:left }
    .album .imageSingle { float:left; margin:5px; width:135px; text-align:left; }
    .album .imageSingle .image { width:88px; height:113px; margin:1px; text-align:left; }
    .album .footer { font-family:verdana,arial,sans-serif; font-size:11px; text-align:left; width:120px; color:#3d3e5d; font-weight:normal; padding-top:0px; padding-bottom:5px; margin-top:0px; }

    Have you had any luck with this issue?

  3. Sirus Coder

    This looks great and will work well for my website, so thank you for writing it and making it look good.

    To Scott and Deborah, I think the idea here is that all the images will be of the same size (created as thumbnails) and all the captions will be constrained to a set number of lines. I am going to stick to a single line of caption and if it appears to extend over the single line, I plan on truncating the text. For example:
    Caption: The quick brown fox jumps over the lazy dog
    I would display this as: The quick brown fox j...

    The thinking is that these boxes would serve as quick identifiers of what you want to click on and not entire packages of information:)

    Just my thoughts. Again good work!

    Sirus

  4. Sanj

    Hi interesting stuff! I was wondering, can you not create a grid without borders, so that the image edges actually touch each other. (For example, like the 'Friends Grid' in Facebook). Have you got a code for that?

    All the best.
    Sanj

  5. Katya

    Hi, thanks for your nice example.
    Do you have any hints how to use such floated grid for the elements of different height?
    I mean to make in work in IE6 and 7?

Comments are closed.