WordPress.org

Author: Dan Zappone

Lightbox Plus implements ColorBox as a lightbox image overlay tool for WordPress. ColorBox was created by Jack Moore and is licensed under the MIT License. Lightbox Plus permits users to view larger versions of images without having to leave the current page, and is also able to display simple slide shows. The use of the dark or light background, which dims the page over which the image has been overlaid, also serves to highlight the image being viewed. Lightbox Plus captures the image title for display in the overlay. Lightbox Plus is able to lightbox images displayed using WordPress build in gallery.

Lightbox Plus uses WordPress's built in jQuery library.

Read the FAQ first if you are having problems.

Lightbox Plus NOW works with WordPress' built in gallery feature.

I'm happy to say Lightbox Plus now works with WordPress' built in gallery. This has been the most requested feature by far. There are few simple requirements however. You you must set Link thumbnails to: Image File or use [gallery link="file" for the gallery options. You must check Use For WP Gallery box under Other Lightbox Plus Settings

IMPORTANT 1.5+ UPGRADE INFORMATION

See the change log for information regarding this upgrading to version 1.5 of Lightbox Plus. There are significant differences from previous versions.

Usage

Note that getting the caption to appear in the overlay image by using the caption options built into WordPress Lightbox Plus uses the image title which is generated by "Edit Image Title" field and not the "Edit Caption Field." You can also manually add lightbox tags to your images using the following instructions.

1. Add a rel="lightbox[uniqueID|filename]" attribute to any link tag to activate the lightbox, include a name between square brackets in the rel attibute. For example:

   <a href="images/image-1.jpg" rel="lightbox[uniqueID|filename]" title="my caption">image #1</a>
   

Optional: Use the title attribute if you want to show a caption.

1. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

   <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
   <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
   <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>