Scenario:

You want a text link in your page content, that when clicked, will open FooBox, and inside the lightbox, there are multiple images.

This is possible but requires a few different steps to follow:

Create Your Gallery

1. Using FooGallery, create a new gallery and add all the images that you want.
2. In the Gallery Settings metabox, make sure you set the Lightbox to FooBox!
3. Also within Gallery Settings, click on the Advanced tab and set Custom Gallery Class to foogallery-hidden
4. Save the gallery.
5. Take note of the gallery ID. If you cannot find it, you can get it from the Gallery Shortcode metabox on the right sidebar. The shortcode will look something like [foogallery id="37"] which means the gallery ID is 37.

Add The Gallery To Your Page

Add or edit the page you want to show these images on.

Add the gallery shortcode to the page, for example:

[foogallery id="37"]Code language: JSON / JSON with Comments (json)

Add A Link To Your Page

Now add a special link to your page. This can be done by adding some custom HTML:

<a href="#foogallery-gallery-37" class="hidden-gallery-link">Open Gallery</a>Code language: HTML, XML (xml)

NOTE : replace the 37 with the ID of your gallery that you created in the first step.

Add Custom JS & CSS

Now that you have all your content ready, you just need to make some tweaks in order to hide the gallery and also tie everything together.

1. Goto FooBox Settings, then click the JS & CSS tab.
2. Under Custom CSS, add the following style:

.foogallery-hidden { 
    display:none !important;
}Code language: CSS (css)

3. Then under Custom Javascript (Pre), add the following code:

jQuery(function($){
	$(".hidden-gallery-link").on("click", function(e){
		e.preventDefault();
		$( e.target.hash ).find(".fg-thumb:first").click();
	});
});Code language: JavaScript (javascript)

Test Your Page

That’s it! Now test your page. If everything went well, you should not see the gallery on page load, and then when you click on the special link, it will open the gallery in FooBox, and you will be able to navigate through all the images.

You should also be able to apply this to other pages on your site, or have add multiple links on the same page. You just need to make sure you are targeting the correct gallery with the gallery ID from the first step.