Colorbox Photo Gallery

A frequent client has really enjoyed the basic photo gallery that I included in their website conversion to a full Content Management System, and it has become an important way to communicate with their clientele. What I had in mind when I built the gallery was a Colorbox style popup that would play a slideshow when the user selected which gallery they wanted to see. During a recent theming upgrade, I had the chance to add those improvements.

It turns out to be a bit more complicated than it seems that it would be. The Colorbox code is an external JavaScript library to Drupal, and the module that provides integration with the Drupal site didn't include the functionality that I wanted. The default behavior is that when a visitor clicks to select a gallery, the gallery page is built, Colorbox is 'triggered' and loads on top with that nice, semi-transparent background - and then it sits there waiting for the visitor to click the start button. Awkward. We already know what the visitor wants to do. Let's show them the gallery slideshow!

With some custom PHP code in the Drupal template, I was able to call Colorbox in auto-start mode when gallery pages are loaded, which gives a smooth and intuitive user experience. Building a custom Colorbox 'trigger' in Views allowed me to pass the photo captions that are stored in the database. The page full of thumbnails is still loaded underneath so that visitors who have JavaScript turned off will be able to click to enlarge any of the photos, like we did in the old days. The result is exactly what I had envisioned - a photo gallery slideshow that looks good, is easy to use and is remarkably flexible.

Add new comment