Trigger FooBox with Plain Text Links

Open Images in FooBox

See Demos Here

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

<a class="foobox" href="">Open FooBox</a>

You can also specify a caption using data attributes.


for the caption title, and


for the caption description:

<a class="foobox" href="" data-caption-title="Cool Title Should Go Here" data-caption-description="A caption description should go here.">Open FooBox</a>

Open a YouTube Video in FooBox

<a href="">Open a YouTube video</a>

Open HTML in FooBox

<a href="#foobox-inline" target="foobox" data-width="650px" data-height="450px">Open some HTML inside FooBox!</a>

Open a Hidden Gallery in FooBox

See Demo Here

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>

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>

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');     //this is to cater for NextGen galleries (if used instead of WP galleries)     $(hiddenAreaId).find('.slideshowlink').remove();     $(hiddenAreaId).find('a:first').click();   }); });