Lightbox Plus for WordPress Demos

Primary Lightbox

A primary lightbox is one that can automatically lightbox your images. You don’t need to do anything other than activate the plugin for it to work. The correct class or rel attribute are automatically added to the image link. Text links to images can also be lightboxed automatically by checking the Auto-Lightbox Text Links option.

Example of automatic lightbox on a linked image

Primary Lightbox (Thumbnail Image Link to Image)
Primary Lightbox (Thumbnail Image Link to Image)

 

Example of automatic lightbox on a text

Primary Lightbox (Text Link to Image)

Example of automatic lightbox with external image

Primary Lightbox (Thumbnail Image Link to External Image)
Primary Lightbox (Thumbnail Image Link to External Image)

 

It’s also possible to have Lightbox Plus automatically lightbox WordPress galleries by check the Use for WP Gallery checkbox.

Example of gallery with ligthboxed images

Simple Gallery
Gallery by ID

Secondary Lightbox General Usage

A secondary lightbox can be used to display internal and external web pages, video or interactive flash. Secondary lightboxes must be set up manually and can use either a rel=”lightbox[id]” attribute or a class=”lbpModal” attribute to associate the link/content with the a lightbox. The following examples show different methods to use secondary lightboxes.

Using Secondary Lightbox for Video Content

A secondary lightbox can be used to display video from either an internal or external source. In order to display video using Lightbox Plus and Colorbox you must at a minimum have the following items set: Inner Width, Inner Height, and Use Iframe must be checked.

YouTube Example

For YouTube videos to load you cannot use the share link which looks like this: http://youtu.be/17jymDn0W6U. However you can get the required link from the embed option that you get from YouTube. The embed links look like this:

You will need to copy the URL (in this case: http://www.youtube.com/embed/17jymDn0W6U) and create your link as follows:

YouTube Flash / Video (Iframe/Direct Link To YouTube Video)

Vimeo Example

In the case of Vimeo you can again use the link provided from the embed option (in this case: http://player.vimeo.com/video/9730308?title=0&byline=0&portrait=0) to create your link as follows:

Vimeo Flash / Video (Iframe/Direct Link To Vimeo)

For locally hosted video you must use the Inline Lightbox option unless you have a similar setup to YouTube or Vimeo for video display. See inline lightbox usage for how to display locally hosted video. Additional video options may be possible but you will have to experiment to see what works.

Using Secondary Lightbox for External Content

A secondary lightbox can be used to show a web page, text, or other content hosted either locally or on another server. In order to display external content using Lightbox Plus and Colorbox you must at a minimum has the following items set: Inner Width, Inner Height, and Use Iframe must be checked.

External Site Example

In the case of an external webpage you merely need to specify the URL to display. In this case we are using the class method for instantiating the lightbox. When the user clicks the link instead of redirecting the browser to another page it opens the page within the lightbox.

Secondary Lightbox (External Page Demo – WordPress.Org in iFrame)

Using Secondary Lightbox for Other Content

Finally, a secondary lightbox can be used to load interactive flash files such as games, quizzes or other content. In order to display interactive flash, you must at a minimum have the following items set: Inner Width, Inner Height, and Use Iframe must be checked.

Local Text File Example

In the case of an local content webpage you merely need to specify the local URL to display. In this case we are using the class method for instantiating the lightbox. When the user clicks the link instead of opening the text file the file is opened within the lightbox.

Interactive Flash Example

In the case of an local content webpage you merely need to specify the local URL of the SWF file. In this case we are using the class method for instantiating the lightbox. When the user clicks the link instead of opening the SWF file in a browser window the file is opened within the lightbox.

Interactive Flash (Iframe/Local Flash File)

General image example

Finally you can use a secondary lightbox to lightbox individual images if you elect not to use the primary lightbox to automatically lightbox images.

Secondary Lightbox (Text Link)

Using Inline Lightboxes

Inline lightboxes are used to display content that exists on the current page. It can be used to display a form, video or any other content that is contained on the page. In order to display inline content using Lightbox Plus and Colorbox you must at a minimum has the following items set: Link Class, Content ID, Width, Height, and Opacity.

Example

The following example shows how to setup content for display in a lightbox. You will need to create a link to the content that contains a class that has the same value as the Link Class for the inline lightbox you are using.

You will also need to set up a div element to contain you content. The div element that contains the content must contains have and id with a value of the Content ID for the inline light box you are using. Finally if you want the content to be hidden until the visitor clicks the link, wrap the content div with another div and set the value for style to display:none or assign a class that has display:none for a property

Inline Demos

Inline content link

Inline Lightbox (Content Test Including Form)

and inline content inlcuding form…

Inline content link…

Inline Lightbox (Content Test Including Form with External Submission)

and inline form…

About Lightbox Plus for WordPress:

Thank you for downloading and installing Lightbox Plus for WordPress

Visit plugin siteFAQSupportFollow on TwitterAdd Facebook Page

Lightbox Plus implements ColorBox as a lightbox image overlay tool for WordPress. ColorBox was created by Jack Moore of Color Powered and is licensed under the MIT License. Lightbox Plus allows you to easily integrate and customize a powerful and light-weight lightbox plugin for jQuery into your WordPress site. You can easily create additional styles by adding a new folder to the css directory under wp-content/plugins/lighbox-plus/css/ by duplicating and modifying any of the existing themes or using them as examples to create your own. See the changelog for important details on this upgrade.

I spend a much of my spare time as possible working on Lightbox Plus and any donation is appreciated. Donations play a crucial role in supporting Free and Open Source Software projects. So why are donations important? As a developer the more donations I receive the more time I can invest in working on Lightbox Plus. Donations help cover the cost of hardware for development and to pay hosting bills. This is critical to the development of free software. I know a lot of other developers do the same and I try to donate to them whenever I can. As a developer I greatly appreciate any donation you can make to help support further development of quality plugins and themes for WordPress. You have my sincere thanks and appreciation for using Lightbox Plus.

Inline Contact Request

We would love to hear from you! For more information about 23Systems, please complete the request form below so 23Systems can respond to your specific needs.