Open a Hidden Gallery from a Text Link

You will need to use some custom HTML in your page or post:

<a href="#foohiddengallery" class="footrigger">Open Hidden WP Gallery</a>
<div id="foohiddengallery" style="display: none;"></div>

FooBox Settings

Make sure you add this to your FooBox settings page, under the JS & CSS tab, the “Custom JS (pre)” setting:

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

Demo 2

You can also use your own set of images if you do not want to use a WP gallery. This method will use the same FooBox Settings from above. Create a link:

<a class="footrigger" href="#foohiddengallery2">Open Hidden Images</a>

Then create a hidden div which contains your images:

<div id="foohiddengallery2" class="foobox" style="display: none;">
	<a href="Graffiti-Wall.jpg"></a>
	<a href="From-Inside-Building.jpg"></a>
	<a href="Demolished-Buildings.jpg"></a>
</div><br>

Please Note

1. In Demo 2 you do not need to include the thumbnail images in the anchor tags, as these are never shown.
2. In Demo 2 to get FooBox to bind to the anchors, make sure the container has the attribute: class="foobox"

Resources