Creating thumbnails and large image pop-ups with EE Gallery and Lightbox

If you’ve used Expression Engine’s Photo Gallery feature, you know that it’s an easy way to organize images for your web site. A common web site feature is creating image galleries with thumnails that link to a larger view. Expression Engine can automatically generate photo galleries for you, but we you can get a much more interesting and responsive photo gallery by using Lightbox.

“Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.”

Step 1: Create an Expression Engine image gallery

If you haven’t done this before, follow the steps in the Expression Engine user guide. Name your gallery gallery-test. To generate thumbnails that layout in a nice grid, it is best to keep the height of all your uploaded images the same. For the very best results, upload a series of images with the same height and width. 500 X 300 pixels is a good starting point.

Upload six images to start. Once you see how Expression Engine generates thumbnails, you’ll have a better idea what size and image ratio you want to use.

Step 2: Create a template to display the gallery

When you create a new image gallery in Expression Engine, it will automatically create a template group to display it. You can ignore this and safely delete it, since we’re going to make our own.

Create a new template group called test.
Open the index template in this new template group.
Create a basic HTML page, using what ever doctype you like. We’re just testing the gallery, so there’s no need to add a <title> tag, meta tags, etc.
Place the following code between the <head> tags.

<link href="/lightbox/lightbox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/lightbox/prototype.js" type="text/javascript"></script>
<script src="/lightbox/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="/lightbox/lightbox.js" type="text/javascript"></script>

We’re calling four scripts here: custom CSS for the Lightbox script, two JavaScript image libraries (Prototype and Scriptaculous), and the Lightbox script. You may need to change the paths to point to the correct place on your server. I prefer to reference all paths starting with / since a forward slash on Linux servers means “start at the domain root”.

Step 3: Insert Expression Engine image gallery tags

Here comes the code:

{exp:gallery:entries gallery="gallery-test" orderby="entry_date" columns="3" rows="4"}
  <table cellpadding="20" cellspacing="0" border="0">
  {entries}
    {row_start}<tr valign="top">{/row_start}
    {row}
      <td>
        <a href="{image_url}" rel="lightbox[roadtrip]" title="{caption}">
          <img src="{thumb_url}" width="{thumb_width}" height="{thumb_height}" />
        </a>
      </td>
    {/row}
{row_blank}<td>&nbsp;</td>{/row_blank}
{row_end}</tr>{/row_end}
{/entries}
</table>
{/exp:gallery:entries}

This is pretty basic EE code. Read it carefully to see what it does. We’re simply creating a three-column table and dropping in the image thumnails from the gallery you created earlier. There are only two things needed for Lightbox to work.

rel=“lightbox[roadtrip]” tells Lighbox that this linked image should trigger the Lightbox effect when clicked. The text within the square brackets is arbitrary. It’s just used to group images together so that the next and previous links function with in the larger image view.
title=”{caption}” tells Lightbox what text to display for the image caption for the larger view.

Once you’re done editing your template, click View Rendered Template to see your handiwork.

And that’s it. You can fancy up your display by creating some CSS styling for your images, perhaps having the border change on mouseover.

Notes

The scripts and CSS files load pretty quickly, but if you want to avoid loading them unneccesarily, you can set a conditional in the <head> of your template, something like
```
[if segment_1="gallery"] (include the files) [/if].
```
There are many other ways to generate an effect like Lightbox. There’s Slimbox, Thickbox, jQuery variations, etc. I have found this particular method to work reliably, but other methods are valid.