This WordPress Lightbox Plugin can be used for images, video, inline HTML, and iFrames. Below are just a few examples of how you can use FooBox.
For a really quick demo, click the below image:
Video
You can also open videos from YouTube and Vimeo inside of a FooBox lightbox.
Forms
You can open various forms in FooBox. Here’s an example using Gravity Forms, where we’ve enabled our Contact Us form to open in FooBox.
Open a Gravity Form by using the Inline HTML Content feature.The code to get this working can be seen below:
<a href="#gravity_form"
target="foobox"
data-width="800px"
data-height="500px">Open a Gravity Form by using the Inline HTML Content feature.</a>
<div id="gravity_form" style="display:none;">
<div style="padding:20px;">
<h2>Contact Us</h2>
[gravityform id=2 title=false description=false ajax=false tabindex=49]
</div>
</div>
Inline HTML
Inline HTML really opens FooBox up for unlimited possibilities. You can put opt-in forms in there, complex tables, simple messages. The sky is the limit.
Open simple HTML content in FooBox
The code to get this working can be seen below:
<a href="#thefooboxcontent"
target="foobox"
data-width="500px"
data-height="500px">Open simple HTML content in FooBox</a>
<div id="thefooboxcontent" style="display:none" >
<div style="padding:50px;">
<h2>Inline Content</h2>
<p>Here is some inline content which you can open within FooBox</p>
</div>
</div>
iFrames
Or you can open iFrame content inside a FooBox. Click the link below to open fooplugins.com inside a FooBox.
Open iframeThe code to get this working can be seen below:
<a href="https://fooplugins.com/" class="foobox" target="foobox">Open iframe</a>
Galleries
Open your media galleries in FooBox. You can open WordPress, Jetpack, Envira and NextGen galleries in FooBox, to name a few. You can also now open FooGallery PRO galleries in FooBox, as you can see in the example below.
Click here to see FooGallery open in FooBoxThe code to get this working can be seen below:
<a href="#fooboxgallery"
target="foobox">Click here to see FooGallery open in FooBox</a>
<div id="fooboxgallery" style="display: none;">[foogallery id="175272"]
</div>
For more info…
You can find more detailed info and instructions in our FooBox documentation. You can find code snippets, more advanced information and other useful tips in our supporting documents.
To find out which of these features come with the PRO version, have a look at our FooBox Feature Comparison.