Hidden Gallery

Demo

Open Hidden Gallery

Code Example

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

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

<a href="#foohiddengallery" class="footrigger">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:hidden;”. It should look like this:

<div id="foohiddengallery" style="display: none;">
[gallery link="file" columns="4" ids="48,49,50,51"]
</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 Javascript field:”

jQuery(function() {
 jQuery('.footrigger').click(function(e) {
 e.preventDefault();
 var div = jQuery(this).attr('href');
 jQuery(div).find('a:first').click();
 });
});

That’s it. Now anytime you create a link to a hidden gallery, it will load in FooBox. Magic!

Leave a Reply