---
title: "Trigger FooBox with Plain Text Links"
id: "176465"
type: "knowledgebase"
slug: "plain-text-links"
published_at: "2019-06-27T12:30:36+00:00"
modified_at: "2026-06-18T19:08:05+00:00"
url: "https://fooplugins.com/documentation/foobox/getting-started/plain-text-links/"
markdown_url: "https://fooplugins.com/documentation/foobox/getting-started/plain-text-links.md"
excerpt: "Open Images in FooBox You can open FooBox from a plain old hyperlink. Just give it a class of “foobox”: You can also specify a caption using data attributes. for the caption title, and for the caption description: Open a..."
taxonomy_knowledgebase_cat:
  - "Getting Started"
---

[Getting Started](https://fooplugins.com/documentation/foobox/getting-started/)

# Trigger FooBox with Plain Text Links

## Related Articles

- [FooBox 101](https://fooplugins.com/documentation/foobox/getting-started/foobox-101/)
- [Including and Excluding FooBox Asset Loading](https://fooplugins.com/documentation/foobox/getting-started/including-and-excluding-foobox-asset-loading/)
- [FooBox Shortcodes](https://fooplugins.com/documentation/foobox/getting-started/foobox-shortcodes/)

**Need more help?** Browse all documentation or open a support ticket.

[All docs](/documentation/)

[Support](/support/)

## Open Images in FooBox

You can open FooBox from a plain old hyperlink. Just give it a class of “foobox”:

```
<a class="foobox" href="your-image.jpg">Open FooBox</a>Code language: HTML, XML (xml)
```

You can also specify a caption using data attributes.

```
data-caption-title
```

for the caption title, and

```
data-caption-desc
```

for the caption description:

```
<a class="foobox" 
    href="your-image" 
    data-caption-title="Cool Title Should Go Here" 
    data-caption-description="A caption description should go here.">
  Open FooBox
</a>Code language: HTML, XML (xml)
```

## Open a YouTube Video in FooBox

```
<a target="foobox" href="http://youtu.be/mO0g5wWVSVk">Open a YouTube video</a>Code language: HTML, XML (xml)
```

## Open HTML in FooBox

```
<a href="#foobox-inline" 
    target="foobox" 
    data-width="650px" 
    data-height="450px">Open some HTML inside FooBox!</a>Code language: HTML, XML (xml)
```

## Open a Hidden Gallery in FooBox

To do the Hidden Gallery technique, you need a couple things:

1) A “trigger”. Your “a” tag should look like this:

```
<a class="footrigger" href="#foohiddengallery">Open Hidden Gallery</a>Code language: HTML, XML (xml)
```

The “footrigger” class is necessary, but the href can be anything you like, it just needs to match the id of the DIV in step 2.

2) Next you need a hidden gallery. Create your gallery as you always would, but wrap the shortcode in a div with an ID which matches your trigger href, then hide it with style=”display:none;”. It should look like this:

```
<div id="foohiddengallery" style="display: none;">[your-gallery-shortcode]</div>Code language: HTML, XML (xml)
```

3) Lastly, you’ll need to add some custom code in your FooBox JS&CSS settings tab. Insert the following into the “**Custom Extra JS**” field:

```
jQuery(function($) {   
  $('.footrigger').click(function(e) {
     e.preventDefault();|
     var hiddenAreaId = $(this).attr('href');
 
    $(hiddenAreaId).find('a:first').click();
   });
 });Code language: JavaScript (javascript)
```

Resources

## Find the right next step

Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages.

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Documentation

Search setup guides, product docs, and troubleshooting articles.

[Browse docs](/documentation/)

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Support

Open a ticket with product details so we can help quickly.

[Get support](/support/)

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Licensing

Review account, renewal, refund, and license information.

[View details](/licensing/)