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):

<div class="album">
    <div class="imageSingle">
        <div class="image"><img src="1-th.jpg"/></div>
        <div class="footer">Caption</div>
    </div>
    <div class="imageSingle">
        <div class="image"><img src="1-th.jpg"/></div>
        <div class="footer">Caption</div>
    </div>
</div>

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:

.album{
  width:100%;
  background-color:#000000;
  padding: 10px;
  float:left
}
.album .imageSingle {
  float: left;
  margin: 5px;
  width:156px;
  text-align:center;
  border:solid 1px #333
}
.album .imageSingle .image {
  width:150px;
  height:150px;
  margin:3px;
}
.album .footer {
  text-align:center;
  width: 156px;
  border-top:solid 1px #333;
  color:#999;
  font-weight:bold;
  padding-top: 7px;
  padding-bottom:7px;
  margin-top: 10px;
}

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:

<div style="clear:both"></div>

Related Reading

• CSS float tutorial
• YUI based Lightbox for image gallery

Download Sample Files

Tableless Image Grid Files

Go to Top

More interesting posts ...

• No Related Post