Using Colorbox to Show Your Node Images in Drupal 7

2011-03-12

Jitesh Doshi

Using Colorbox to Show Your Node Images in Drupal 7

How to configure Colorbox module in Drupal 7 to display attached images in a lightbox overlay.

Drupal 6 is very good. But Drupal 7 is even better. Much cleaner user interface (UI), and much cleaner application programming interface (API) as well.

Today, I’m going to talk about Colorbox integration in Drupal 7. With Colorbox in D7, you can show your attached images in a very user-friendly (and nice looking manner).

Setup for Article content type:

  1. Install D7 version of Colorbox from http://drupal.org/project/colorbox. Make sure to follow instructions for installing the colorbox jQuery plugin (perhaps in sites/all/libraries).
  2. Goto Structure > Content Types > Article > Manage Fields, and add a new field named “Images” of field type “Image”
  3. Goto Structure > Content Types > Article > Manage Display, change the “Images” field display “Format” to “Colorbox”
  4. Click on the “gear” icon and set “Node image style” to “thumbnail” while leaving “Colorbox image style” to “Original”

That’s it. Now your Article nodes will start showing a list of images attached to them as thumbnails. And when you click the thumbnail a colorbox comes up with shows the original image and also lets you cycle through all the other attached images.