Note: You can see the result of this tutorial here.

Tired of the lightboxes and the thickboxes you see on every Drupal website? Although this one makes no exception for the blocks, I wanted a more straightforward interface for the nodes. Keeping the lightbox for blocks makes sense since the main area of the page contains unrelated content. But when a page is solely dedicated to displaying images, you can improve usability with a good old semi-automatic slideshow display.

An automatic slideshow may lead your visitors to look at a greater number of images than a manual thumbnail/lightbox setting.

Slideshows on Drupal

Members of the Drupal community have developed several modules for JQuery-based slideshows. However, a quick look into drupalmodules.com reveals that most of them are based on the Galleria plugin. The main concern with the Galleria plugin is that it fades the images in rather than slide them. Another slideshow module is based on the jQuery Cycle Plugin, which may fit to your needs. But the key to good Drupal development is theming, and I recently found the slideViewerPro plugin for JQuery that met all my requirements.

slideViewerPro 1.0

On July 1st, Gian Carlo Mingati released a new version of slideViewerPro 1.0. You can use it to make a truly sliding image gallery with a nice -- sliding as well -- thumbnails carousel.

This JQuery plugin offers several advantages:
• It works with Jquery, the javascript library that is probably already loading in your Drupal installation.
• It uses an unordered list to display the images.
• It is lightweight: 10.31Kb.
• It is actually easy to incorporate it into your theme, as you will see below.

It also has downsides when you try to integrate it into Drupal:
• I don't know any slideViewerPro module developed for Drupal
• Instead of using real image thumbnails, the script resizes the original images using a fixed width and height, resulting in poor quality thumbnails especially if the original images come in different sizes.

However, by modifying the javascript code and theming a special node type, you can get a much more flexible slideshow feature than contributed modules and take a full advantage of the imagecache and imagefield module.