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

<a href="http://www.23systems.net/wp-content/uploads/2008/07/lbplus-example.jpg" rel="lightbox[917]"><img class="size-medium wp-image-45" title="Primary Lightbox (Thumbnail Image Link to Image)" src="http://w1.23systems.info/wp-content/uploads/2008/07/lbplus-example-300x225.jpg" alt="Primary Lightbox (Thumbnail Image Link to Image)" width="300" height="225" /></a>

Example of automatic lightbox on a text

Primary Lightbox (Text Link to Image)

<a title="Text Link" href="http://www.23systems.net/wp-content/uploads/2008/07/lbplus-example.jpg" rel="lightbox[917]">Primary Lightbox (Text Link to Image)</a>

Example of automatic lightbox with external image

<a title="External Image Link" href="http://upload.wikimedia.org/wikipedia/commons/f/f5/Light_dispersion_conceptual_waves.gif" rel="lightbox[917]"><img class=" " title="Primary Lightbox (Thumbnail Image Link to External Image)" src="http://upload.wikimedia.org/wikipedia/commons/f/f5/Light_dispersion_conceptual_waves.gif" alt="Primary Lightbox (Thumbnail Image Link to External Image)" width="250" height="188" /></a>

Primary Lightbox with WordPress Gallery

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

Gallery via Jetpack Tiled Gallery using random images from different posts

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:

<iframe width="420" height="315" src="http://www.youtube.com/embed/17jymDn0W6U" frameborder="0" allowfullscreen></iframe>

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)

<a title="The Known Universe" class="lbpModal" href="http://www.youtube.com/embed/17jymDn0W6U">YouTube Flash / Video (Iframe/Direct Link To YouTube Video)</a>

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)

<a title="Projection Animation Test" class="lbpModal" href="http://player.vimeo.com/video/9730308?title=0&amp;byline=0&amp;portrait=0">Vimeo Flash / Video (Iframe/Direct Link To Vimeo)</a>

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)

<a class="lbpModal" title="Secondary Lightbox (External Page Demo - WordPress.Org in iFrame)" href="http://WordPress.org/support/plugin/lightbox-plus">Secondary Lightbox (External Page Demo - WordPress.Org in iFrame)</a>

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.

<a class="lbpModal" href="http://www.23systems.net/wp-content/plugins/lightbox-plus/readme.txt">Locally Hosted Content (Iframe/Direct Link To Text File)</a>

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)

<a href="http://www.23systems.net/wp-content/plugins/lightbox-plus/trivia.swf" class="lbpModal" title="Interactive Flash Demo">Interactive Flash (Iframe/Local Flash File)</a>

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)

<a class="lbpModal" title="Secondary Lightbox (Text Link)" href="http://www.23systems.net/wp-content/uploads/2011/10/Glessner-Covered-Bridge-Somerset-County-PA.jpg" rel="lightbox[917b]">Secondary Lightbox (Text Link)</a>

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.

<a class="lbp-inline-link-1" href="#">Inline HTML Content</a>

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

<div style="display:none">
    <div id="lbp-inline-href-1" style="padding: 10px;background: #fff">
        Inline Content Goes Here
    </div>
</div>

Inline Demos

Inline content link

Inline Lightbox (Content Test Including Form)

<a class="lbp-inline-link-2" href="#">Inline Lightbox (Content Test Including Form)</a>

and inline content inlcuding form…

<div style="display: none;">
    <div id="lbp-inline-href-2" style="padding: <span class=;">10px; background: #fff;">INLINE FORM GOES HERE</div>
</div>

Inline content link…

Inline Lightbox (Content Test Including Form with External Submission)

<a class="lbp-inline-link-1" href="#">Inline Lightbox (Content Test Including Form with External Submission)</a>

and inline form…

<div style="display: none;">
    <div id="lbp-inline-href-1" style="padding: <span class=;">10px; background: #fff;">INLINE CONTENT GOES HERE</div>
</div>