# FooBox Usage Examples

These examples show the HTML patterns for common FooBox use cases.

Use `class="foobox"` on links that should be opened by FooBox. For WordPress Button blocks, WordPress may place custom classes on the wrapper instead of the `<a>` element; in that case, use the FooBox "Specific CSS Classes" setting to target the inner link, for example `.foobox.wp-block-button a`.

Inline HTML, embedded HTML, and iframe examples need `target="foobox"`. Do not add `fbx-link` or `fbx-instance` in source HTML; FooBox adds those classes at runtime.

The "WordPress Lightbox" compatibility setting is off by default for upgrade safety. When an admin enables it, core Image blocks using "Open in lightbox" and core Gallery blocks using `linkTo: "lightbox"` are converted to FooBox. FooBox changes those blocks to link to the media file, disables the core lightbox for that block, and applies the FooBox attributes/grouping.

## Image Themes And Captions

FooBox can vary the modal style and colour per link with `data-style` and `data-theme`.

```html
<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-image-1.jpg"
   data-style="fbx-rounded"
   data-theme="fbx-light"
   data-caption-title="Rounded Light"
   data-caption-desc="This image uses the rounded style and light colour scheme.">
  Rounded Light
</a>

<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-image-2.jpg"
   data-style="fbx-flat"
   data-theme="fbx-dark"
   data-caption-title="Flat Dark"
   data-caption-desc="This image uses the flat style and dark colour scheme.">
  Flat Dark
</a>

<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-image-3.jpg"
   data-style="fbx-metro"
   data-theme="fbx-light"
   data-caption-title="Metro Light"
   data-caption-desc="This image uses the metro style and light colour scheme.">
  Metro Light
</a>

<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-image-4.jpg"
   data-style="fbx-glass"
   data-theme="fbx-dark"
   data-caption-title="Glass Dark"
   data-caption-desc="This image uses the glass style and dark colour scheme.">
  Glass Dark
</a>
```

Image captions can also be pulled from nested image attributes, depending on the caption source settings.

```html
<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-image-5.jpg"
   title="Anchor title caption">
  <img src="/wp-content/uploads/2026/06/demo-image-5-thumb.jpg"
       alt="Image alt caption"
       title="Image title caption">
</a>
```

## Opening Effects

FooBox Pro can set the default opening/closing animation in "Look & Feel" > "Opening/Closing Animation". A specific link can override that with `data-effect`; omit `data-effect` to use the global default.

Available effect values:

- `none` - None
- `fbx-effect-1` - Zoom in
- `fbx-effect-2` - Slide from right
- `fbx-effect-3` - Slide from bottom
- `fbx-effect-4` - Newspaper, spin while zooming in
- `fbx-effect-5` - Fall
- `fbx-effect-6` - Slide fall
- `fbx-effect-7` - Flip, horizontal
- `fbx-effect-8` - Flip, vertical
- `fbx-effect-9` - Fold down
- `fbx-effect-10` - Super scaled
- `fbx-effect-11` - Swing from bottom
- `fbx-effect-12` - Swing from left

Three per-link examples:

```html
<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-image-zoom.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/2026/06/demo-image-slide.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/2026/06/demo-image-flip.jpg"
   data-effect="fbx-effect-7"
   data-style="fbx-glass"
   data-theme="fbx-light">
  Open With Horizontal Flip
</a>
```

## Single Image

```html
<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-image-1.jpg"
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Open Image
</a>
```

## Multiple Images

Use one visible trigger and hidden links that share the same `rel` value.

```html
<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-gallery-1.jpg"
   rel="demo-gallery"
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Open Gallery
</a>

<div style="display:none">
  <a rel="demo-gallery" href="/wp-content/uploads/2026/06/demo-gallery-2.jpg"></a>
  <a rel="demo-gallery" href="/wp-content/uploads/2026/06/demo-gallery-3.jpg"></a>
  <a rel="demo-gallery" href="/wp-content/uploads/2026/06/demo-gallery-4.jpg"></a>
</div>
```

If multiple different `rel` galleries are used on the same page, leave the global REL Grouping setting blank so FooBox uses the clicked link's own `rel` value.

Modern block-editor output can use `data-foobox-group` instead of `rel`. This avoids conflicts with WordPress link `rel` values such as `noopener` and avoids the global REL Grouping override.

```html
<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-gallery-1.jpg"
   data-foobox-group="demo-gallery">
  Open Gallery
</a>

<div style="display:none">
  <a data-foobox-group="demo-gallery" href="/wp-content/uploads/2026/06/demo-gallery-2.jpg"></a>
  <a data-foobox-group="demo-gallery" href="/wp-content/uploads/2026/06/demo-gallery-3.jpg"></a>
</div>
```

## HTML Content

```html
<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>
```

## YouTube Video

```html
<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>
```

## Self Hosted Video

```html
<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-video.mp4"
   data-width="960"
   data-height="540"
   data-cover="/wp-content/uploads/2026/06/demo-video-poster.jpg"
   data-style="fbx-rounded"
   data-theme="fbx-dark">
  Open Video
</a>
```

## HTML Content With A Form

```html
<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>
```

## Iframe

```html
<a class="foobox"
   href="https://example.com/demo-page/"
   target="foobox"
   data-width="960"
   data-height="640"
   data-style="fbx-rounded"
   data-theme="fbx-light">
  Open Iframe
</a>
```

## HTML Content Showing A FooGallery Shortcode

```html
<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="123"]
    </div>
  </div>
</div>
```

## Large Image With Panning

Set `data-overflow="true"` on the large image link. In FooBox Pro settings, set "Panning Overview Position" to a visible position, not "Hidden".

```html
<a class="foobox"
   href="/wp-content/uploads/2026/06/demo-large-panorama.jpg"
   data-overflow="true"
   data-width="3000"
   data-height="1800"
   data-style="fbx-rounded"
   data-theme="fbx-dark">
  Open Large Image
</a>
```

## Per-Link HTML Overrides

These attributes can be used directly on a FooBox link to override behaviour for that item or instance.

| Attribute | Applies to | Purpose |
| --- | --- | --- |
| `class="foobox"` | All | Marks a link for FooBox when the default/custom selectors include `.foobox`. |
| `target="foobox"` | HTML, embed, iframe | Required for inline HTML, embedded HTML, and iframe items. |
| `href` | All | Item URL or selector. Use an image/video URL, an iframe URL, or `#element-id` for inline HTML. |
| `rel` | Images/galleries | Groups links when REL grouping is blank or matches this value. |
| `data-foobox-group` | Images/galleries | Groups links using FooBox's block-editor-friendly grouping attribute. This takes precedence over `rel`. |
| `data-style` | All | Overrides modal style: `fbx-rounded`, `fbx-flat`, `fbx-metro`, `fbx-glass`. |
| `data-theme` | All | Overrides modal colour class, commonly `fbx-light` or `fbx-dark`. |
| `data-modal-class` | All | Adds custom classes to the FooBox modal for this instance. |
| `data-effect` | All | Overrides the open/close effect with an effect class such as `fbx-effect-1`. |
| `data-width` | All item types | Sets item width. For inline HTML this can be on the link or target element. |
| `data-height` | All item types | Sets item height. For inline HTML this can be on the link or target element. |
| `data-max-width` | Images | Sets the maximum image width used by the image handler. |
| `data-max-height` | Images | Sets the maximum image height used by the image handler. |
| `data-overflow` | Images, HTML, embed, iframe | Boolean. Allows scroll/overflow handling; required for large-image panning. |
| `data-fullscreen` | Images, HTML, embed, video, iframe | Boolean. Allows or disables fullscreen for the item. |
| `data-proportion` | Images, HTML, embed, video, iframe | Boolean. Controls proportional resizing for the item. |
| `data-image` | Images, HTML, embed, video, iframe | For image links, overrides the loaded image URL. For other items, provides an image URL used by social/caption integrations. |
| `data-cover` | Video | Poster image for self-hosted video. |
| `data-padding` | HTML | Extra padding used when sizing inline HTML content. |
| `data-ajax` | HTML | Boolean. Allows custom JS to load HTML when the target selector is not present. |
| `data-type="embed"` | Embed | Treats `href="#id"` as embedded HTML instead of normal inline HTML. |
| `data-caption-title` | Captions | Explicit caption title. jQuery exposes this as `captionTitle`. |
| `data-title` | Captions | Alternate explicit caption title. |
| `data-caption-desc` | Captions | Explicit caption description. jQuery exposes this as `captionDesc`. |
| `data-description` | Captions | Alternate explicit caption description. |
| `data-title-source` | Captions | Per-link caption title source override: `find`, `image_find`, `image`, `image_alt`, `anchor`, `none`. |
| `data-desc-source` | Captions | Per-link caption description source override: `find`, `image_find`, `image`, `image_alt`, `anchor`, `none`. |
| `data-fullscreen-enabled` | Instance | Boolean override for the fullscreen button. |
| `data-fullscreen-force` | Instance | Boolean override to force fullscreen. |
| `data-fullscreen-a-p-i` | Instance | Boolean override for native browser fullscreen API use. The JS reads the camel-case `fullscreenAPI` data key. |
| `data-foobox` | External opener | Selector for an already initialized FooBox target. Example: `data-foobox="#gallery-wrapper"`. Avoid using this for option JSON on normal FooBox item links. |

## JavaScript Options

FooBox options can be supplied through Pro's "Custom JS Options" setting, through filters that alter the generated options, or by manually initializing with `$(selector).foobox(options)`.

Core options:

- `affiliate.enabled`, `affiliate.prefix`, `affiliate.url`
- `alwaysInit`
- `closeOnOverlayClick`
- `containerCssClass`
- `countMessage`
- `error`
- `excludes`
- `externalSelector`
- `fitToScreen`
- `hideScrollbars`
- `loadDelay`
- `loaderTimeout`
- `modalClass`
- `preload`
- `rel`
- `resizeSpeed`
- `selector`
- `showButtons`
- `showCount`
- `style`
- `theme`
- `transitionInSpeed`
- `transitionOutSpeed`
- `initCallback`
- `loop`

Handler and add-on options:

- `html.attr`, `html.overflow`, `html.fullscreen`, `html.sizePadding`, `html.showCaptions`, `html.regex`, `html.findSelector`
- `embed.attr`, `embed.overflow`, `embed.fullscreen`, `embed.showCaptions`, `embed.regex`, `embed.findSelector`
- `images.noRightClick`, `images.attr`, `images.overflow`, `images.fullscreen`, `images.showCaptions`, `images.regex`, `images.maxWidth`, `images.maxHeight`, `images.findUrl`
- `videos.attr`, `videos.fullscreen`, `videos.regex`, `videos.findUrl`, `videos.autoPlay`, `videos.defaultWidth`, `videos.defaultHeight`, `videos.showCaptions`, `videos.showImmediate`, `videos.volume`
- `iframe.attr`, `iframe.fullscreen`, `iframe.showCaptions`, `iframe.showImmediate`, `iframe.allowFullscreen`, `iframe.regex`, `iframe.exclude`, `iframe.findUrl`
- `captions.html`, `captions.animation`, `captions.enabled`, `captions.descSource`, `captions.hoverDelay`, `captions.maxHeight`, `captions.onlyShowOnHover`, `captions.onlyShowOnClick`, `captions.overrideDesc`, `captions.overrideTitle`, `captions.prettify`, `captions.titleSource`, `captions.dataTitle`, `captions.dataDesc`
- `deeplinking.enabled`, `deeplinking.prefix`
- `fullscreen.enabled`, `fullscreen.force`, `fullscreen.useAPI`
- `effect`
- `keyboard.enabled`, `keyboard.preventDefault`, `keyboard.stopPropagation`
- `hideNavOnMobile`, `resizeTimeout`, `breakpoints.phone`, `breakpoints.tablet`, `iosInterval`
- `slideshow.autostart`, `slideshow.autostop`, `slideshow.enabled`, `slideshow.imagesOnly`, `slideshow.mousestopTimeout`, `slideshow.timeout`, `slideshow.sensitivity`, `slideshow.skipErrors`
- `social.enabled`, `social.position`, `social.onlyShowOnHover`, `social.onlyShowOnClick`, `social.hoverDelay`, `social.excludes`, `social.nonce`, `social.networks`, `social.popup`, `social.popupSize`, `social.download`, `social.mailto`
- `swipe.enabled`, `swipe.min`
- `pan.enabled`, `pan.showOverview`, `pan.position`
- `wordpress.enabled`

Example custom JS options:

```js
selector: "a",
images: {
  overflow: true,
  maxWidth: 2400,
  maxHeight: 1600
},
captions: {
  titleSource: "anchor",
  descSource: "none",
  animation: "fade"
},
pan: {
  enabled: true,
  showOverview: true,
  position: "fbx-bottom-right"
}
```

## PHP Filters, Actions, And JS Events

FooBox exposes several override points outside the admin UI. These are the FooBox-specific hooks in this plugin, excluding Freemius internals.

Generated JavaScript, selector, and option filters:

- `foobox-raw-options`
- `foobox-options`
- `foobox_extra_selector`
- `foobox_js_selectors`
- `foobox_auto_link_images`
- `foobox_auto_link_images_javascript`
- `foobox_extra_scripts_pre`
- `foobox_extra_scripts_post`
- `foobox_extra_scripts_custom`
- `foobox_generate_javascript_ready_event` (Free)
- `foobox_generate_javascript_pre` (Free)
- `foobox_generate_javascript_post` (Free)
- `foobox_generate_javascript_captions` (Free)
- `foobox_generate_javascript_custom` (Free)

Caption filters:

- `foobox_caption_title_attributes_override`
- `foobox_caption_desc_attributes_override`

Asset, admin, settings, and metabox filters:

- `foobox_enqueue_scripts`
- `foobox_enqueue_styles`
- `foobox_settings_show_advanced`
- `foobox_settings_show_js`
- `foobox_admin_support_menu_url`
- `foobox-name`
- `foobox-settings-summary`
- `foobox-settings_summary`
- `foobox-settings_menu`
- `foobox-settings_title`
- `foobox-admin-settings-init-condition`
- `foobox_metabox_post_types`
- `foobox_metabox_title`
- `foobox_metabox_desc_exclude`
- `foobox_metabox_desc_include`
- `foobox_getting_started_title`
- `foobox_getting_started_tagline`
- `foobox-free-admin_settings` (Free)

Social sharing filters:

- `foobox_social_networks`
- `fooboxshare_param`
- `fooboxshare_network_defaults`
- `fooboxshare_available_networks`
- `fooboxshare_facebook_default_app_id`
- `fooboxshare_network_enabled`
- `fooboxshare_use_permalink`
- `fooboxshareurl`
- `fooboxshare_sharedata_for_crawlers`
- `fooboxshare_sharedata_for_visitors`

FooBox actions:

- `foobox-admin-init`
- `foobox-admin-settings-init`
- `foobox_admin_print_styles`
- `foobox_admin_print_scripts`
- `foobox_admin_menu_after`
- `foobox_admin_menu_render_settings`
- `foobox_admin_menu_render_getting_started`
- `foobox_admin_init`
- `foobox_frontend_init`
- `foobox-admin_settings_init`
- `foobox_pre_tab`
- `foobox_post_tab`
- `foobox_pre_section`
- `foobox_post_section`
- `foobox_custom_admin_settings_render`
- `foobox_register_shortcodes`

Common runtime events for Custom Javascript:

- `foobox.initialized`
- `foobox.reinitialized`
- `foobox.destroy`
- `foobox.setupHtml`
- `foobox.setupOptions`
- `foobox.parseItem`
- `foobox.handlesHtml`
- `foobox.loadHtml`
- `foobox.handlesEmbed`
- `foobox.loadEmbed`
- `foobox.handlesImage`
- `foobox.handlesVideo`
- `foobox.handlesIframe`
- `foobox.beforeLoad`
- `foobox.afterLoad`
- `foobox.beforeShow`
- `foobox.afterShow`
- `foobox.beforeResize`
- `foobox.afterResize`
- `foobox.showOverflow`
- `foobox.hideOverflow`
- `foobox.beforeClose`
- `foobox.close`
- `foobox.afterClose`
- `foobox.previous`
- `foobox.next`
- `foobox.onError`
- `foobox.alterCaption`
- `foobox.createCaption`
- `foobox.captionsShow`
- `foobox.captionsHide`
- `foobox.hasHash`
- `foobox.fullscreenEnabled`
- `foobox.fullscreenDisabled`
- `foobox.keydown`
- `foobox.slideshowStart`
- `foobox.slideshowStop`
- `foobox.slideshowPause`
- `foobox.socialClicked`
- `foobox.swipeLeft`
- `foobox.swipeRight`

## Admin Settings

These are the settings registered by the plugin. Conditional integrations only appear when the related plugin or feature is available.

### Free Settings

General:

- `enable_galleries` - WordPress Galleries
- `enable_captions` - WordPress Images With Captions
- `enable_attachments` - Attachment Images
- `enable_class` - Specific CSS classes
- `fit_to_screen` - Fit To Screen
- `hide_scrollbars` - Hide Page Scrollbars
- `show_count` - Show Counter
- `count_message` - Count Message
- `hide_caption` - Hide Captions
- `captions_show_on_hover` - Show Captions On Hover
- `error_message` - Error Message
- `default_image_link` - Default Image Link
- `auto_link_images` - Auto Link Existing Images
- `override_core_lightbox` - WordPress Lightbox

Advanced:

- `close_overlay_click` - Close On Overlay Click
- `custom_excludes` - Custom Excludes
- `image_rel_selector` - REL Grouping
- `disable_others` - Disable Other Lightboxes
- `enable_debug` - Enable Debug Mode
- `force_hide_trial` - Force Hide Trial Notice
- `excludebydefault` - Exclude FooBox Assets

Debug/upgrade/internal:

- `debug_output`
- `upgrade`
- `thanks`

### Pro Settings

General / Attach FooBox:

- `enable_galleries` - WordPress Galleries
- `enable_captions` - WordPress Images With Captions
- `enable_attachments` - Attachment Images
- `default_image_link` - Default Image Link
- `auto_link_images` - Auto Link Existing Images
- `override_core_lightbox` - WordPress Lightbox
- `enable_nextgenV2` - NextGen V2 Galleries, conditional
- `enable_nextgen` - NextGen Galleries, conditional
- `jetpack_tiled_images` - Jetpack Tiled Galleries, conditional
- `override_woocommerce_lightbox` - WooCommerce Products, conditional
- `disable_woocommerce_features` - Disable WooCommerce Zoom & Lightbox, conditional
- `enable_class` - Specific CSS classes
- `enable_all` - All images
- `support_jig` - Justified Image Grid, conditional

Look & Feel:

- `theme` - Theme/style: `fbx-rounded`, `fbx-glass`, `fbx-metro`, `fbx-flat`
- `colour` - Colour Scheme
- `custom_color_text` - Custom Icon Color
- `custom_color_base` - Custom Base Color
- `icon` - Icon Set
- `loader` - Loader Icon
- `button_type` - Navigation Buttons
- `open_animation` - Opening/Closing Animation

Captions:

- `show_caption` - Show Image Captions
- `video_captions` - Show Video Captions
- `html_captions` - Show HTML Captions
- `iframe_captions` - Show iFrame Captions
- `force_caption_bottom` - Force Caption To Bottom
- `captions_show_on_hover` - Show Captions On Hover
- `captions_hidden` - Hide Captions Initially
- `caption_anim` - Caption Animation
- `caption_title_source` - Override Image Caption Title
- `caption_desc_source` - Override Image Caption Description
- `caption_prettify` - Prettify Ugly Captions

Functions:

- `fit_to_screen` - Fit To Screen
- `hide_scrollbars` - Hide Page Scrollbars
- `hide_buttons` - Hide Navigation Buttons
- `close_overlay_click` - Close On Overlay Click
- `error_message` - Error Message
- `disble_deeplinking` - Disable Deeplinking
- `deeplinking_prefix` - Deeplinking Prefix
- `allow_fullscreen` - Show Fullscreen Button
- `force_fullscreen` - Force Fullscreen
- `fullscreen_api` - Use Browser API
- `preload_images` - Preload Images
- `enable_protection` - Enable Image Protection
- `image_rel_selector` - REL Grouping
- `panning_overview` - Panning Overview Position
- `show_count` - Show Counter
- `count_message` - Count Message
- `slideshow_enabled` - Enable Slideshow
- `slideshow_autostart` - Auto-start Slideshow
- `slideshow_autostop` - Auto-stop Slideshow
- `slideshow_timeout` - Slide Timeout
- `iframe_loading` - When To Show iFrame Content
- `iframe_fullscreen` - iFrame Allow Fullscreen

Social Sharing:

- `social_enabled` - Social Icons Enabled
- `social_email` - Email Enabled
- `social_download` - Download Original Image
- `social_iframe` - Enable iFrame Sharing
- `social_html` - Enable HTML Sharing
- `exclude_cpt` - Exclude For Post Types
- `social_vertical` - Vertical Position
- `social_horizontal` - Horizontal Position
- `social_icons_stacked` - Stack Icons
- `social_show_on_hover` - Show On Hover
- `social_hidden` - Start Hidden
- `social_facebook` - Facebook Enabled
- `social_facebook_appid` - Facebook App ID
- `social_twitter` - X Enabled
- `social_twitter_username` - X Username
- `social_twitter_image_size` - X Image Size
- `social_pinterest` - Pinterest Enabled
- `social_linkedin` - LinkedIn Enabled
- `social_reddit` - Reddit Enabled
- `social_tumblr` - Tumblr Enabled
- `social_use_bitly` - Use Bitly URL Shortener
- `social_bitly_token` - Bitly Access Token

Advanced:

- `disable_swipe` - Disable Swipe
- `disable_others` - Disable Other Lightboxes
- `deregister_others` - Deregister Other Lightbox Files
- `scripts_in_footer` - Scripts In Footer
- `foobox_ready_event` - Use Custom Ready Event
- `enable_debug` - Enable Debug Mode
- `force_delay` - Force Delay
- `excludebydefault` - Exclude FooBox Assets
- `settingsmenurole` - Show Extra Settings Menu

JS & CSS:

- `custom_css` - Custom CSS
- `custom_modal_css` - Custom Modal Class
- `custom_pre_js` - Custom Javascript (Pre)
- `custom_js` - Custom Javascript (Post)
- `custom_js_options` - Custom JS Options
- `custom_js_extra` - Custom Extra JS
- `custom_selector` - Custom FooBox Selector
- `custom_excludes` - Custom Excludes
- `custom_js_captions` - Custom Captions Code
- `custom_initcallback_js` - Custom Init Callback Javascript

FotoMoto, demo, and debug:

- `fotomoto_position` - Fotomoto Link Position
- `fotomoto_custom_script` - Fotomoto Script
- `demo_js`
- `debug_output`