23Systems Web Devsign

Lightbox Plus permits users to view larger versions of images without having to leave the current page, and is also able to display simple slideshows. 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.

Download from 23Systems

Lightbox Plus 1.3.0 (383) - 52.86 KB

Download from WordPress.Org

Lightbox Plus for WordPress

Description

Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar.  Lightbox Plus is used to create overlay display images on the webpage and to automatically add the correct overlay links to images.  Lightbox Plus permits users to view larger versions of images without having to leave the current page, and is also able to display simple slideshows. 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 uses WordPress’s built in prototype and scriptacolous (builder and effect) libraries.

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 whicih is generated by “Edit Image Title” field and not the “Edit Caption Field.”  You can also manually add lightbox tags to your images sineg the following instructions from the Lightbox JS instructions.

1. Add a rel=”lightbox” attribute to any link tag to activate the lightbox. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a></code>

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

2. 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>

Planned in next release:

1. Optional image title capture.
2. Class based implementation (I should have done it the first time around)
3. Suggestions welcome

Installation

1. Extract lightbox-plus.zip to your wp-content/plugins directory.
2. In the admin panel under plugins activate Lightbox Plus.
3. In the admin panel under setting click on Lightbox Plus, select a color style and choose save settings - you must do this for lightbox to function correctly.
4. It should now be completely set up and function.

Screenshots

Lightbox Plus Demo and Example

Frequently Asked Questions

Can I use this plugin and Lightview Plus, Lightbox 2 (either one), WP lightbox JS Plugin at the same time?

No they would interfere with the image enhancement in your posts and pages.

Can I add my own styles and images for the overlay?

Yes, you can add a new stylesheet to the css directory in the plugin directory.  Lightbox plus will show the stylesheet in the dropdown on the admin panel.  You can add your own images to the image directory but you will need to modify both the styles sheets and lightbox.js file to reflect the new images.

How does Lightbox Plus differ from other Lightbox plugins for WordPress?

Performance wise there probably are no advantages.  The regular expressions that handle the text are more robust handling a wider variety of characters and additionally besides just adding the image to a ‘lightbox’ it will also grab the image title from the image to use for the ‘lightbox’ caption.

Changelog

1.1.1

• Moved admin panel under Design
• Minor code formating for better readability

1.1.0

• Fixed absolute pathing - should now work in blog residing in sub directories
• Rolled code into class structure

1.0.1

Modifications to regex usage for image linking

1.0

Initial release