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="http://docs.fooplugins.com/wp-content/uploads/2013/12/marketing-iphone5-2.png">FooBox custom caption using data attributes</a>

3. Using Custom Javascript (advanced)

Code Example

<a class="foobox foobox-caption" href="http://docs.fooplugins.com/wp-content/uploads/2013/12/marketing-iphone5-2.png">FooBox with Custom Caption</a>

Walkthrough

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 be able to 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

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, 		description = e.fb.item.description;  	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 Developer:
    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.

This snippet below uses the data-caption-title and data-caption-desc attributes just like the previous example, but it allows you to set the description dynamically. It also creates two new attributes: (1) data-url; and (2) data-button-text. Lastly, it outputs the HTML content for the custom captions and you can see the markup and how those data-attributes are passed into the HTML. The result is a custom title, custom description, and a linkable button with customizeable text.

$('.dynamic-custom-caption').on('foobox.createCaption', function(e) { 	var projectURL = $(e.fb.item.element).data('url'); 	var buttonText = $(e.fb.item.element).data('button-text'); 	e.fb.item.caption = '<div>' + e.fb.item.title + '</div>' + 		'<div>' + e.fb.item.description + 		' <a href="' + projectURL + '">' + buttonText + '</a>' + 		'</div>'; });

Next, in order to implement the caption on your media item, use the following example code:

<a class="dynamic-custom-caption"  	href="http://docs.fooplugins.com/wp-content/uploads/2013/12/marketing-iphone5-2.png"  	target="_blank"  	data-url="http://fooplugins.com/plugins/foobox"  	data-caption-title="I am a Caption Title"  	data-caption-desc="A button should be right here =&gt;"  	data-button-text="Buy FooBox Now!"> Open this FooBox </a>