Open Images in FooBox

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

<a class="foobox" href="http://foobox.fooshowcase.com/wp-content/uploads/sites/3/2013/06/foobox-demo-pic-4.jpg">Open FooBox</a>

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="http://foobox.fooshowcase.com/wp-content/uploads/sites/3/2013/06/foobox-demo-pic-4.jpg" 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 target="foobox" href="http://youtu.be/mO0g5wWVSVk">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

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();
   });
 });