Custom Captions in FooBox

There are essentially 3 ways to change the captions that are shown in FooBox:

  1. Via FooBox Settings
  2. Using data attributes in your HTML
  3. Using custom javascript (advanced)

1. Via FooBox Settings

Goto Settings > FooBox Settings > Captions tab in your WordPress admin and change these 2 settings to override the where captions are pulled from:

  1. Override Image Caption Title
  2. Override Image Caption Description

2. Using Data Attributes

If you have control over the HTML, then you can add these 2 data attributes to override the captions:

  1. data-caption-title
  2. data-caption-desc

Code Example

<a class="foobox" 
   data-caption-title="I am a custom caption title!" 
   data-caption-desc="I am a custom caption description. I can be very long...." 
   href="https://site.com/my-image.png">FooBox custom caption using data attributes</a>

3. Using Custom Javascript (advanced)

You can create unique and customizable captions per image with FooBox. Developers can do many things with captions by hooking into the foobox.createCaption event. This walkthrough helps all users understand how custom captions are created and implemented.

First, you have two options, both of which involve adding custom javascript into the “Custom Javascript (Pre)” field in your FooBox settings under the “JS & CSS” tab. The two options are (1) Create a static custom caption to be used whenever you give a link a specific class name; or (2) Create a dynamic caption per image with a unique class name and using various data-attribute properties.

Static Custom Captions

The static custom captions example works with the following simple HTML code:

<a class="foobox foobox-caption" href="some-image.png">FooBox with Custom Caption</a>

On the FooBox settings page, add some code to the JS & CSS > Custom Javascript (Pre) setting:

$('.custom-caption').on('foobox.alterCaption', function(e) {

    var $element = $(e.fb.item.element),
        title = e.fb.item.title,  //pulls the title from the currently clicked item
        description = e.fb.item.description; // pulls the description from the item

    e.fb.item.caption = '<div>' + title + '</div>' + '<div>Hello World!</div>';
});

This tells FooBox to add a custom caption to any link with the class custom-caption. And that caption will have the title of the image (according to your FooBox caption settings), and the description “Hello World!”. Naturally, this means if you link to a video, inline html, or iFrame with that custom caption then you’ll need to make sure you have captions for those media items enabled in your FooBox “Look and Feel” tab settings.

Dynamic Custom Captions

If instead, you want to set custom captions per image, your javascript will have to be a bit different.

  • For Developers:
    You can access specific element attributes inside the event. For example, you can add various data attributes to pass custom information to your FooBox captions, for example, using a the data-caption-title and data-caption-desc like the above. Then you can access the element usinge.fb.item.element inside your javascript code.
  • For General Users:
    Use the code snippet below as a base to learn how to customize your captions per media element.

In order to implement the dynamic captions on your media item, use the following example HTML code:

<a class="foobox dynamic-custom-caption"
    href="http://point-to/some-image.png"
    data-url="https://fooplugins.com/foobox"
    data-caption-title="I am a Caption Title"
    data-caption-desc="A button should be right here =>"
    data-button-text="Buy FooBox Now!">Open FooBox</a>

The snippet above uses the data-caption-title and data-caption-desc attributes, just like the previous example, but it also uses two new attributes: (1) data-url; and (2) data-button-text.

In the javascript snippet below, custom HTML content is built up for the captions using the new data attributes. On the FooBox settings page, add the following code to the JS & CSS > Custom Javascript (Pre) setting:

$('.dynamic-custom-caption').on('foobox.createCaption', function(e) {

    var $element = $(e.fb.item.element),   
        url = $element.data('url'),
        buttonText = $element.data('button-text');

    e.fb.item.caption = '<div>' + e.fb.item.title + '</div>' +
        '<div>' + e.fb.item.description + 
        ' <a target="_blank" href="' + url + '">' + buttonText + '</a></div>';

});