FooBox Demos

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:

FooBox is a responsive mobile-friendly WordPress lightbox plugin
FooBox Image Lightbox

Video

You can also open videos from YouTube and Vimeo inside of a FooBox lightbox.

Open a YouTube video

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>


d="thefooboxcontent">
    <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 iframe

The 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 FooBox

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