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"