Using Colorbox to show your node images in Drupal 7

Using Colorbox to show your node images in Drupal 7

Submitted by Jitesh Doshi on Sat, 03/12/2011 - 09:48
Image field display settings

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 Colobox integration in Drupal 7. With Colorbox in D7, you can show your attached images in a very user-friendly (and nice looking manner).

Let's say you want to enhance the "Article" content type with Colorbox images ("Article" content type in D7 replaces "Story" content type from D6).

  1. Install D7 version of Colorbox on your D7 site from http://drupal.org/project/colorbox. Make sure you follow the instructions correctly for not just installing the module, but also 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, make sure "Images" field is not hidden and then change the display "Format" to "Colorbox"
  4. Click on the "gear" icon and set "Node image style" to "thumbnail" while leaving "Colorbox image style" to "Original"

See the attacscreenshot for how it looks after configuration. In fact, this site itself uses colorbox. So when you click on the screenshot thumbnail below, you'll see colorbox in action.

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.

Jitesh Doshi

Profile picture for user Jitesh Doshi
Managing Partner & CTO
  • A seasoned technology entrepreneur and enthusiast
  • A regular speaker at industry conferences and universities
  • Host and organizer of technology user groups
  • Active in management of non-profit organizations serving the local community
  • Leader and contributor for multiple open-source projects
  • Expert in cloud, application integration, web and mobile technologies
  • Author of open-source projects, including on Drupal.org - Popular Tags and P
© 2021 SpinSpire All rights reserved.