Last updated 14 December 2016. Created on 16 May 2007.
Edited by purvas12, LeeHunter, quantumized, stella. Log in to edit this page.

Description

The Lightbox2 module is a simple, unobtrusive script used to overlay images on the current page. It is easy to set-up and works on most modern browsers. The module places images above your current page, not within. This frees you from the constraints of layout, particularly column widths, and keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity (and no fun!). The module inserts the required JavaScript and CSS directly into your page with no need to edit the theme.

Features

The version 2 module has several benefits over the plain Lightbox module. Note, not all of these features are available when the "Lightbox2 Lite" option is enabled.

  • Image Sets: group related images and navigate through them with ease - ideal for your image galleries.
  • Slideshow Capability: automatically transition between grouped images, includes play/pause and previous and next buttons.
  • HTML Content Support: ability to show websites or other HTML content in a lightbox.
  • Video Content Support: ability to show videos in a lightbox.
  • Visual Effects: fancy pre-loader and transition when you click on the image.
  • Keyboard Shortcuts: useful keyboard shortcuts for switching between images, toggling play / pause, etc.
  • Zoom Capability: larger images are reduced in size so they fit snugly inside the browser window. A zoom in button can then be clicked on to see it in its original size, while a zoom out button is provided to return you to the scaled down version.
  • Choice of Layouts: there are two layouts provided, not including the "Lightbox2 Lite" version.
  • Automatic Image Detection: configurable automatic re-formatting of image node thumbnails, so there is no need to add 'rel="lightbox"' to each image node link on your site. Image, Inline, Flickr, Acidfree Albums, Image Assist, Embedded Media Field and CCK Imagefield modules are all supported (images must have the "inline", "thumbnail", "image-thumbnail", "preview", "image-preview", etc, classes). It's also possible to configure a list of custom image classes which will trigger the lightbox when clicked on.
  • Control Over Lightbox Image Size: configure which image size should be displayed in the lightbox, e.g. preview or original.
  • Imagecache Support: adds a Lightbox2 field formatter for CCK imagefields for your custom views.
  • Image Page Link: a link to the image page can be provided within the lightbox itself. You can even specify if it should be opened in the current window or a new window.
  • Page Exclusion Capability: exclude certain pages on your site from having the lightbox2 functionality.
  • Login Support: ability to modify all user/login links so the login form appears in a lightbox.
  • Skin and Animation Configuration: configure the order and speed of the lightbox animations, along with the lightbox colors, border size and overlay opacity.
  • Gallery 2 Support: support for Gallery 2 images via the Gallery module (beta). See here for information on how to customise your Gallery2 theme to work with lightbox.
  • Right-to-Left Language Support: support for right-to-left languages and themes.

Dependencies

Lightbox2 5.x-2.0 and later versions now all use the jQuery library instead of the Scriptaculous and Prototype libraries, so there is no need to download and install a separate third party package. The 5.x versions have a dependency on the jQuery Update module since the version of jQuery included in Drupal core is not that recent. Both jQuery Update 1.x and 2.x versions should work with Lightbox2.

There is no such dependency for the 6.x versions.

Demo

http://www.stellapower.net/lightbox2

Current Maintainers

AttachmentSize
20.jpg2.33 KB

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

josh.compgeek’s picture

This is SO awesome! When I first started my site, I was hand coding and using VisualLightBox and VideoLightBox. Of course, when I switched to Drupal, I couldn't add code to the head section. This is Visual/Video LightBox, but 100,000,000 times better!
Thank you!
Josh

trulygreat’s picture

Our viewers are complaining as many times they have to scroll down to find the X to close the screen. I know they can click outside it to close it, but rather than have to explain that ten times a day I would love to be able to move the X to an upper nav rather than the one at the bottom. Plus. once fall term starts, that will be magnified by 100x!

Anyone accomplish this? And if so, how did you do it? (Keep in mind I am not a programmer:)

Thanks!

Thia

iantresman’s picture

I note that the demo mention above, features the closing X in the top-right corner. The following forum post may help "How To Move Lightbox2 Close Buttons To Top", which has a solution by editing the css/lightbox.css file, or better yet, selecting the "Use alternative layout" on the Lightbox2 admin page.

sbwright’s picture

Hi all,

How would I go about integrating LightBox 2 with the story content-type such that selecting "Read more..." will pop the full content into a lightbox.

Thanks!

diokey’s picture

Hi, i'm totally new to drupal.
i want to integrate a slide show images on my website, and i thought this module was the right module i needed. so i installed it as described in read me. but i don't know how to create a slide show of those image and nothing appears on any page.
May be it's not the right module?
what do i have to do?

thanks....

Kevkash’s picture

Hello,

This is my first time posting on a drupal module page so please correct me if I post this issue in the wrong area or what not.

I was wondering is there a way to create a cover image for each image that is created within a view? But the catch is the cover images doesn't show up in the light box just on the thumbnail only.

This would be really helpful.

KevKash