Yesterday a colleague of mine asked me about what would be the requirements of HTML used for an image gallery using modal windows. As I’ve previously done this myself, I thought I might as well share some code in this blog.

The code examples below can be used for creating a Web 2.0 like photo album in which a user can browse back and forth between collections of images. In order to make it simple, I’ve just made the script construct the album based on “static” HTML code. That is, for it to work, the web page (for example JSP or PHP) will have to contain references to all of the images we want to display.

In case you have lots of images to print, I would consider using dynamic loading of sets of images (using Ajax) instead of loading all of the images at once — thus saving both bandwidth and load time.

For the javascript part, I’ve decided to use jQuery as well as the jquery.cycle and jquery.lightbox plugins. I’ve put together a live demo for you to try.

HTML structure

The HTML code needed for a gallery like this is actually rather simple. All we have to do, is to print the images as plain old linked HTML images and wrap image collections in container elements (DIVs).

<h1>My Photo Collection</h1>
<p id="intro">
  This is my photo album...yaddi-yaddi-ya...
</p>
<div class="album">
  <h2>Wicked Album</h2>
  <a href="photos/image1.jpg">
    <img src="photos/thumb_image1.jpg" alt="Lorem" />
  </a>
  <a href="photos/image2.jpg">
    <img src="photos/thumb_image2.jpg" alt="Ipsum" />
  </a>
  <a href="photos/image3.jpg">
    <img src="photos/thumb_image3.jpg" alt="Lorem" />
  </a>
</div>
<div class="album">
  <h2>Wickier Album</h2>
  <a href="photos/image4.jpg">
    <img src="photos/thumb_image4.jpg" alt="Ipsum" />
  </a>
  <a href="photos/image5.jpg">
    <img src="photos/thumb_image5.jpg" alt="Yadi" />
  </a>
  <a href="photos/image6.jpg">
    <img src="photos/thumb_image6.jpg" alt="Yadi" />
  </a>
  <a href="photos/image7.jpg">
    <img src="photos/thumb_image7.jpg" alt="Ya" />
  </a>
</div>
<div class="album">
  <h2>Wickiestest Album</h2>
  <a href="photos/image8.jpg">
    <img src="photos/thumb_image8.jpg" alt="Lorem" />
  </a>
  <a href="photos/image9.jpg">
    <img src="photos/thumb_image9.jpg" alt="Ipsum" />
  </a>
</div>

That’s all we need. No magic there, just clean HTML.

The Magic of jQuery Plug-Ins

In order to turn this into something a bit more exciting than a bunch of linked images with a blue border, we add some JavaScript and CSS to the page.

First, make sure to include jQuery, jQuery Cycle and jQuery Lightbox to the page. Then add the following JavaScript code to another .js-file that is loaded into the same page:

$(document).ready( function() {
  // Dynamically add nav buttons as these are not needed in non-JS browsers
  var prevNext = '<div id="album-nav"><button ' +
                   'class="prev">&laquo; Previous' +
                   '</button><button class="next">' +
                   'Next &raquo;</button></div>';
  $(prevNext).insertAfter('.album:last');
  // Add a wrapper around all .albums and hook jquery.cycle onto this
  $('.album').wrapAll('<div id="photo-albums"></div>');
  $('#photo-albums').cycle({
    fx:     'turnDown',
    speed:  500,
    timeout: 0,
    next:   '.next',
    prev:   '.prev'
  });
  // Remove the intro on first click -- just for the fun of it
  $('.prev,.next').click(function () {
    $('#intro:visible').slideToggle();
  });
  // Add lightbox to images
  $('.album a').lightBox();
});

In the (rare?) case in which you only have a few images to display, or for some other reason have no need for it, you may of course remove the cycling effect.
The only JavaScript you’d then need is $('.album a').lightBox();.

Adding Style Info

Last, we add some style info to make our albums look at least somewhat good.

/** for this example, I don't give a rats (*) about IE */
.album {
  width: 600px !important;
  clear: both;
}
.album h2 {
  clear: both;
}
.album a {
  display: block;
  float: left;
  margin-right: 1em;
  padding: 0.5em;
  border: 1px solid black;
  background-color: #eee;
  text-align: center;
}
.album a:hover {
  border-color: blue;
}
.album img {
  width: 72px;
  height: 100px;
  border: 0;
}
#album-nav {
  margin-top: 1em;
  max-width: 500px;
}
.prev, .next {
  border: 1px outset #ccc;
  color: #000075;
  background-color: white;
  font-weight:bold;
  padding: 0.25em;
}
.prev:hover,.next:hover {
  border-style: inset;
}
.prev {
  float: left;
}
.next {
  float: right;
}

And there you go.

Download example code as ZIP archive.