Knowledge Base

What is FooBox Image Lightbox for WordPress?

Simple, automatic responsive lightbox for images.

More Info

https://wordpress.org/plugins/foobox-image-lightbox/

Initial Configuration

FooBox > Settings

Default settings work well, but under the Advanced tab, check the option Drop IE7 Support.

Usage

Automatic. If you want to have a non-image (e.g. text) link linked to an image or gallery, try the following:

  • Just add a class of “foobox” to your links and make sure the link points to an image, for example:
<a href="http://www.example.com/wp-content/uploads/2017/03/image.jpg" class="foobox">Link</a>
  • Group your images into galleries that open in FooBox. Just add a class of “foobox” and the same rel attribute to the links you want to group together, for example:
<a href="image1.jpg" class="foobox" rel="gallery">Link 1</a>
<a href="image2.jpg" class="foobox" rel="gallery">Link 2</a>
<a href="image3.jpg" class="foobox" rel="gallery">Link 3</a>

NOTE: If you use WordPress’ [ gallery ] shortcode, Foobox will automatically create a gallery lightbox so you don’t need to do the above steps.

  • FooBox will try to find captions from the link and image titles, but you can be sure by adding data-caption-title and data-caption-desc attributes onto your links, for example:
<a data-caption-title="A Caption Title" data-caption-desc="A longer caption description" href="image1.jpg" class="foobox">Link 1</a>

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *