Drupal views & lightbox: How to add lightbox to a view of images

Do you have a view of images and you want to add the lightbox functionality to it? Nothing more easy than that!
Step 1: 
Install the Drupal module Lightbox2

Download and enable the module Lightbox2. The details on the configuration options can be found here.

Step 2: 
Rewirte the field you want to use to display the image

Choose Rewirte results > Rewrite the output of this field and add the following code:

<a href="[image-url]" rel="lightbox[grouping-field]" title="[caption]">
<img src="[image-url]" alt="[alt-text]" />
</a>

For the following parameters you can use tokens - you can add hidden fields to create them - or fixed parameters.

[image-url] = Absolute URL to the image
[grouping-field] = If you want to group the images into one lightbox, you can add the field to be used for grouping as a parameter
[caption] = Caption text
[alt-text] = Alt text for the image

Step 3: 
Theming and options

If you want to display the lightbox in a different way - for example only as a part of the screen - you can easily theme it by applying CSS to #lightbox2-overlay, #lightbox, #outerImageContainer, #imageDataContainer, #lightbox img, #imageData #caption and #imageData #numberDisplay.

Often, especially if you reduce the size of the lightbox overlay to a limited part of screen, it might be useful to remove the main scrolling bar when the lightbox opens and to add it again when the lightbox closes. To do so you can add and remove a class to the body and the apply overflow:hidden; to it. Example (lightbox.js):

// Add class noscroll to body (283)
$('body').addClass('noscroll');

// Remove class noscroll to body (928)
$('body').removeClass('noscroll');

.noscroll {overflow:hidden;}

The rel type can also be used for one of the following:

  • lightbox for image content
  • lightshow for image slideshows
  • lightvideo for video content
  • lightmodal for inline HTML content. Note this isn't for full web pages, just snippets of HTML content
  • lightframe for everything else, including external web pages.

Details and examples can be found here.

Example of Drupal Views and Lightbox2 integration
Taxonomy: 

Drupal themes to be compared