FooBox - Responsive Image Lightbox for WordPress with Social Sharing

FooBox Lightbox Demos

This WordPress Lightbox Plugin can be used for images, video, inline HTML, and iFrames. Below are a few examples of how you can use FooBox.

Glass theme available in FooBox PRO
Browse Demos
Compare Lightboxes

Images responsive overlays

Video YouTube and Vimeo

HTML forms and iFrames

Lightbox Demos

Working FooBox Examples

Open images, videos, inline HTML, forms, iframes, galleries, and oversized media with the same simple link patterns used in FooBox.

1

Single image

Open one image in FooBox with per-link style and color settings.

Open Image

<a class="foobox"
   href="/wp-content/uploads/2025/09/FooBox-Demo-Image-1.jpg"
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Open Image
</a>Code language: HTML, XML (xml)

2

Multiple images

Use one visible trigger and hidden links that share a FooBox group.

Open Image Set

<a class="foobox"
   href="/wp-content/uploads/2025/09/FooBox-Demo-Image-1.jpg"
   rel="foobox-group">
  Open Gallery
</a>

<div style="display:none">
  <a rel="foobox-group" href="/wp-content/uploads/2025/09/FooBox-Hero-Image.jpg"></a>
  <a rel="foobox-group" href="/wp-content/uploads/2025/09/FooBox-Feature-Image-1.png"></a>
  <a rel="foobox-group" href="/wp-content/uploads/2025/09/FooBox-Feature-Image-2.png"></a>
</div>Code language: HTML, XML (xml)

3

Video

Open a hosted YouTube video or a direct self-hosted MP4 file in FooBox.

Open YouTube Video
Open Self-hosted Video

<a class="foobox"
   href="https://www.youtube.com/watch?v=kJQP7kiw5Fk"
   data-width="960"
   data-height="540"
   data-style="fbx-rounded"
   data-theme="fbx-dark">
  Open YouTube Video
</a>

<a class="foobox"
   href="/wp-content/uploads/2020/03/Nature-31377.mp4"
   data-width="960"
   data-height="540"
   data-cover="/wp-content/uploads/2020/03/0zsm8b_8TZ4.jpg"
   data-style="fbx-rounded"
   data-theme="fbx-dark">
  Open Video
</a>Code language: HTML, XML (xml)

4

Inline HTML

Open hidden content from the current page inside a FooBox modal.

Open HTML

Hidden HTML Content

This content is stored on the page and opened inside FooBox.

<a class="foobox"
   href="#demo-hidden-html"
   target="foobox"
   data-width="600"
   data-height="400"
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Open HTML
</a>

<div style="display:none">
  <div id="demo-hidden-html">
    <div style="background:white; padding:20px">
      <h2>Hidden HTML Content</h2>
      <p>This content is stored on the page and opened inside FooBox.</p>
    </div>
  </div>
</div>Code language: HTML, XML (xml)

5

Forms

Open a Gravity Form inside FooBox using the inline HTML content pattern.

Open Form

Plugin Beta Testing

Interested in beta testing our newest features? We’ll be offering a significant discount for beta testers. Sign up below for more details and to receive the discount.

Contact Details

Name(Required)
Email(Required)

<a class="foobox"
   href="#demo-hidden-form"
   target="foobox"
   data-width="550"
   data-height="550"
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Open Form
</a>

<div style="display:none">
  <div id="demo-hidden-form">
    <div style="background:white; padding:20px">
      [gravityform id="10" ajax="true" title="true"]
    </div>
  </div>
</div>Code language: HTML, XML (xml)

6

iFrame

Open another page inside FooBox with an iframe target.

Open iFrame

<a class="foobox"
   href="https://fooplugins.com/foobox/download/"
   target="foobox"
   data-width="960"
   data-height="640"
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Open Iframe
</a>Code language: HTML, XML (xml)

7

Gallery

Open a real local FooGallery shortcode inside a FooBox modal.

Open FooGallery

<a class="foobox"
   href="#demo-hidden-foogallery"
   target="foobox"
   data-width="900"
   data-height="650"
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Open FooGallery
</a>

<div style="display:none">
  <div id="demo-hidden-foogallery">
    <div style="background:white; padding:20px">
      [foogallery id="193639"]
    </div>
  </div>
</div>Code language: HTML, XML (xml)

8

Large image with panning

Use overflow handling for oversized images when FooBox PRO panning is enabled.

Open Large Image

<a class="foobox"
   href="/wp-content/uploads/2019/04/foobox-panning-infographic.webp"
   data-overflow="true"
   data-width="4200"
   data-height="1200"
   data-style="fbx-rounded"
   data-theme="fbx-dark">
  Open Large Image
</a>Code language: HTML, XML (xml)

Customization examples

Themes, colors, captions, and open effects

Use per-link FooBox data attributes to demonstrate style, color scheme, caption, and animation variations.

1

Themes

Open the same kind of image with each documented FooBox PRO theme style.

Rounded
Flat
Metro
Glass

<a class="foobox" href="/wp-content/uploads/2025/09/FooBox-Demo-Image-1.jpg" data-style="fbx-rounded" data-theme="fbx-light">Rounded</a>
<a class="foobox" href="/wp-content/uploads/2025/09/FooBox-Hero-Image.jpg" data-style="fbx-flat" data-theme="fbx-dark">Flat</a>
<a class="foobox" href="/wp-content/uploads/2025/09/FooBox-Feature-Image-1.png" data-style="fbx-metro" data-theme="fbx-light">Metro</a>
<a class="foobox" href="/wp-content/uploads/2025/09/FooBox-Feature-Image-2.png" data-style="fbx-glass" data-theme="fbx-dark">Glass</a>Code language: HTML, XML (xml)

2

Colors

Switch the documented light and dark FooBox color schemes per link.

Light
Dark

<a class="foobox"
   href="/wp-content/uploads/2025/09/FooBox-Demo-Image-1.jpg"
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Light Color Scheme
</a>

<a class="foobox"
   href="/wp-content/uploads/2025/09/FooBox-Demo-Image-1.jpg"
   data-style="fbx-rounded"
   data-theme="fbx-dark">
  Dark Color Scheme
</a>Code language: HTML, XML (xml)

3

Captions

Add explicit caption title and description values to an individual FooBox item.

Open Captioned Image

<a class="foobox"
   href="/wp-content/uploads/2020/03/Captions.png"
   data-caption-title="Custom Caption Title"
   data-caption-desc="This caption is supplied with data attributes."
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Open Captioned Image
</a>Code language: HTML, XML (xml)

4

Open effects

Override the opening and closing animation per link with three documented effect classes.

Zoom In
Slide Right
Horizontal Flip

<a class="foobox"
   href="/wp-content/uploads/2025/09/FooBox-Demo-Image-1.jpg"
   data-effect="fbx-effect-1"
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Open With Zoom In
</a>

<a class="foobox"
   href="/wp-content/uploads/2025/09/FooBox-Hero-Image.jpg"
   data-effect="fbx-effect-2"
   data-style="fbx-flat"
   data-theme="fbx-dark">
  Open With Slide From Right
</a>

<a class="foobox"
   href="/wp-content/uploads/2025/09/FooBox-Feature-Image-1.png"
   data-effect="fbx-effect-7"
   data-style="fbx-glass"
   data-theme="fbx-light">
  Open With Horizontal Flip
</a>Code language: HTML, XML (xml)

Ready to decide?

Choose the FooBox plan
that fits your lightbox goals

Use the pricing section to choose the right license, or start the free trial to test FooBox PRO before buying.

Buy Now
Start Free Trial

Pricing update

Monthly & Lifetime plans are currently not unavailable

We’re not offering these payment options right now. Leave your name and email and we’ll let you know as soon as they return.

NameEmailNotify Me

No spam - Unsubscribe anytime