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
Example of automatic lightbox on a text
Example of automatic lightbox with external image
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
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.
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:
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:
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.
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.
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.
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.
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 content link
and inline content inlcuding form…
10px; background: #fff;">INLINE FORM GOES HERE
Inline content link…
and inline form…
10px; background: #fff;">INLINE CONTENT GOES HERE
About Lightbox Plus for WordPress:
Thank you for downloading and installing Lightbox Plus for WordPress
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.