Create a gallery with Drupal and Thickbox

Powerful features and special effects are not something that only big websites with plenty of cash to burn can afford. In fact, most of the neat design features you see nowdays are pretty easy to get right - some with practically no programming required. Let's look at how to create a basic image gallery using Drupal, Views and Thickbox.

For the purposes of this example, you'll need to have the following installed - apart from Drupal (or a Site prebuilder distribution) itself:

Note that if you are using Drupal 7, then all you need install is Views because all the others have been integrated into the core.

I should say that there are drupal modules available, most notably jCarousel, that provide this type of functionality straight out of the box. However, what you'll often find is that it is possible to imitate the functionality of contributions by clever use of things like views and CCK. Often, creating your own features is far more flexible and powerful in the end too.

Follow this list of instructions to get your gallery up and running:

  • Create a new content type called gallery and give it a new CCK image field called gallery image
  • Create a new Image style called gallery style using ImageCache - use scale and crop to force the images into suitable dimensions, say 100x100 pixels
  • Create a number of new gallery posts using various images
  • Create a new view that filters by gallery content type and displays only the gallery image field - ensure you select Thickbox: gallery_style_image for the format and set the Label option to None
  • Style your output using CSS (Hint: you may want to use Firebug in Firfox to find out class names for the images in your view)

That's all there is to it. The rest is styling with CSS to create some nice effects. For example, you could set the opacity to 0.7 for your images, until someone hovers over the image and it goes to 100%. In the same way you could play with borders and shading to highlight the currently hovered over image.

It's also possible to seriously upgrade the gallery as it stands. Often, you'd like your gallery to rotate through a large number of images - larger than there is space on the page to show at one time. No problem! You won't even need to do any programming, but you will need the following contribution:

Once this is installed, revisit the view and set the Style from unformatted or grid (or whatever you have used), to Slideshow. Most of the default settings are fine to at least view the results with. You'll need to come back and play around with the settings to get things just right.

Enjoy!