You have always been able to open inline HTML in FooBox. This has allowed you to include items like mail subscriptions or notifications in a lightbox. You are also able to open FooGallery galleries by using the gallery shortcode in your html.

You can follow these steps to open your FooGallery in FooBox PRO. Firstly, you need to add at least the following 2 properties to your “a” tag, following which you can then add any custom styling you need:

1. The href needs to point to the div ID of the content you want to load. Ideally, you’ll put that div at the bottom of your page.
2. You need to add target=”foobox” to the “a” tag as well.

Here’s an example of what the “a” tag would look like when implementing this:

<a href=”#fooboxgallery” target=”foobox”>Click here to see FooGallery open in FooBox</a>

Next you need to have a div with the shortcode for the gallery that you want to show in FooBox. If you’ve just created a gallery, you can use simply click on the shortcode and paste it into the code. To find the shortcode of an existing gallery, go to the Galleries page from your menu. The shortcode for each gallery is in the second to last column.

This div has to have the following 3 things to work properly:

1. It has to have an ID that matches that of the source “a” tag exactly. In this case id=”fooboxgallery”.
2. It has to be hidden with inline CSS like so: style=”display:none;”.
3. There has to be another tag immediately inside the div wrapping all of the content. It can be another div, or simply a p tag, but all the inside content has to also have a wrapper.

Here’s an example of the div that we used in the above link:

<div id=”fooboxgallery” style=”display: none;”>[Insert gallery shortcode here]</div>

If the size of the gallery isn’t what you’re looking for, you will need to add width and height attributes to the HTML. You can set these to a similar size to your thumbnail size (as set in your gallery settings) to ensure the images aren’t cropped. Here’s what we did:

<a href=”#fooboxgallery” target=”foobox” data-width=“500” and data-height=“600″>Click here to see FooGallery open in FooBox</a>

If you’re using the block editor, you can use the Custom HTML blocks to add the code to your post.