Lightbox2 - How to add a lightbox to your images and other content

~~Demo site: http://www.stellapower.net/lightbox2~~

There are a number of ways to use Lightbox2 functionality and they can be split into two sections - manual and automatic.

Manual

The majority of the links at the bottom of this page provide details on how to add custom links to your site which when clicked will open an image, video or web page in a lightbox. This is done through the use of a rel attribute on the anchor link.

For example to open an image in a lightbox by clicking on a link, you would type something like the following:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">click here!</a>

The rel type can be 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.

Each rel type supports different types of content and features. See the links below (particularly How to add inline content) for more details regarding additional configuration options available to control how your lightbox displays.

Automatic

Lightbox2 integrates with a lot of Drupal modules to automatically add Lightbox2 support. This means there is no need to add rel="lightbox" to each individual image on your site. The enabling of lightbox support for a particular Drupal module can be easily enabled and configured at admin/settings/lightbox2/automatic. Details on these configuration options can be found at Lightbox2 - Settings.

CCK imagefield, emfield and filefield are the exception to this - the lightbox functionality for these modules can be enabled per CCK field in your View or custom content type.

The list of modules supported include:

Other modules also provide support for Lightbox2, including Imagefield Gallery and Fast Gallery. Gallery2 support is available, see link below.

How to add Lightbox2 to gallery of images

First of all, I'm pretty new in the Drupal world, only a few weeks of experience, so I don't know if there is already a module to do this.

Lightbox2 - How to add a lightbox to images

Demo site: http://www.stellapower.net/lightbox2

Lightbox2 - How to add a lightbox to webpage links

It's possible to show webpage content in the lightbox, using iframes. In this case the "rel" attribute should be set to lightframe. Again

Lightbox2 - How to add inline content

It's possible to show HTML snippets in the lightbox as long as they are on the same domain. In this case the rel attribute should be set to

Lightbox2 - How to create a slideshow

This is very similar to the grouping functionality for images. The only difference is that "rel" attribute should be set to lightshow

Lightbox2 - How to display Drupal messages in a lightbox

By placing the code below in your theme's page.tpl.php file, it's possible to have Drupal messages appear as modal popups. Just add the

Lightbox2 - How to display video content

It's possible to show video content in the lightbox. In this case the "rel" attribute should be set to lightvideo. It's possible to group

Lightbox2 - How to to open a lightbox from a Flash movie

Taken from [#324365] - credit goes to nathan573.

Lightbox2 - How to use the "Lightbox Trigger" Views field

Steps:

Lightbox2 - How to use with CCK Imagefield and Imagecache

Preparation

Lightbox2 - Custom integration with CCK Imagefield and Imagecache

Lightbox2 - How to use with Gallery2

Here are links that provide step-by-step instructions on how to modify the Gallery2 theme to work with Lightbox in the standalone version,

Using Lightbox2 with TinyMCE or FCKEditor

You can easily use Lightbox2 on anchored images inserted by TinyMCE or FCKEditor, by using the "custom image trigger classes" feature.

Using Lightbox2 with dynamically created content and "start slideshow" link

When using Lightbox2 in image gallery settings you may want a "Start Slideshow" link to appear at the top of the image gallery. Normally

Guide maintainers

stella's picture