Build a jQuery Lightbox Image Gallery by Changing One Line

We're back from Boston DrupalCon 2008 and busy catching up with everything else. The site that I'm using this technique on will launch soon, but I wanted to share it now. Also, check out my Technorati Profile!

Drupal's Image module provides you with a pretty no-frills image gallery out of the box. In a site I was recently building, I wanted to present large imagery, but my main content column inside the site was somewhat cramped, and so I decided that some sort of Lightbox / Thickbox effect was in order to present the images to the user.

Luckily, with two extra modules and changing a single line of template.php code, you can get your gallery up and running with Lightbox.

This snippet is currently for Drupal 5 and it requires the installation of the jQuery Update and jQuery Lightbox modules. Make sure you follow the instruction in jQuery Update's documentation and replace the core jquery.js file.

jQuery Lightbox functions with several other modules, like Imagecache and Inline, but I just wanted to quickly enable Lightbox for a gallery listing page. That lead me to look into the image gallery module to determine what function would need theming. theme_image_gallery_img() was the target.

Lightbox works on image links with a rel attribute of either "lightbox" or "lightbox[galleryname]". All links containing the same rel will get presented together. Therefore, to theme an image gallery to activate Ligthbox, you only need to get that rel attribute onto your links. Furthermore, title attributes added to links will also show up in the bottom of the Lightbox window, so adding a title attribute is also a good idea.

To activate your site for jQuery Lightbox, copy theme_image_gallery_img() into your template.php file, and rename it YOURTHEMENAME_image_gallery_img(). Then make the following change, which will add both the rel and title attributes to your links.

function YOURTHEMENAME_image_gallery_img($image, $size) {
  $width = $size['width'];
  // We'll add height to keep thumbnails lined up.
  $height = $size['height'] + 75;
 
  $content = '<li';
  if ($image->sticky) {
    $content .= ' class="sticky"';
  }
  $content .= " style='height : {$height}px; width : {$width}px;'>\n";
  //$content .= l(image_display($image, IMAGE_THUMBNAIL), 'node/'. $image->nid, array(), NULL, NULL, FALSE, TRUE);
  $content .= l(image_display($image, IMAGE_THUMBNAIL), urldecode(url($image->images['preview'], NULL, NULL, TRUE)), array('rel' => 'lightbox[gallery]', 'title' => $image->body), NULL, NULL, FALSE, TRUE);
  $content .= '<h3>'. l($image->title, 'node/'. $image->nid) .'</h3>';
  if (variable_get('image_gallery_node_info', 0)) {
    $content .= '<div class="author">'. t('Posted by: !name', array('!name' => theme('username', $image))) ."</div>\n";
    if ($image->created > 0) {
      $content .= '<div class="date">'. format_date($image->created) ."</div>\n";
    }
  }
  $content .= "</li>\n";
 
  return $content;
}

The commented-out line is the original, and the line below it is the replacement that does all the magic for us. It does three things to enable Lightbox:

1. It changes the link from node/nid to the actual link to the image file here:

   urldecode(url($image->images['preview'], NULL, NULL, TRUE))

   This is required to make Lightbox work - it reads the src attributes of your link. I've chosen to have my links point to the 'preview' image size. You can change that to whichever size you have set up.

2. It add a rel attribute. I chose lightbox[gallery], but you are free to choose whichever one you like.
3. It adds a title attribute equal to the body of the image node. This will make the image's body show up in the Lightbox window.

Once you have that done, clicking on any image in the gallery listing pages will activate jQuery Lightbox, unless they don't have JavaScript on, in which case it will take them directly to the preview-sized image. Clicking on the h3 tags that are generated will still take them into the full node view.