Trigger FooBox with Plain Text Links

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)