What is Reveal Lightbox?

Reveal Lightbox is a WordPress feature that allows users to view larger versions of images and videos. It works like a pop-up window, but rather than actually popping up a new window, it displays inside the primary window while the rest of the web page dims in the background. To see how it works, click the image below.

• 

How to add a Reveal Lightbox

After inserting an image gallery block, select the block and find the Link Settings on the right. Under the Link To dropdown, select Media File. Learn more about Galleries here.

With image blocks, select the Insert Link icon from the block toolbar. Select Media File from the drop-down options.

Display any content in a Reveal Lightbox with the shortcode

You can use Reveal Lightbox to display any type of block content (combinations of images, buttons, text, etc) with the “reveal” shortcode.

There are two steps to set this up:

1. Set up a link to open the lightbox

You can use any type of image or button block to open the lightbox:

1. Insert your image or button block on the page
   
2. With the block selected, go to the settings on the right of the screen: Block > Advanced
   
3. Under Additional CSS class(es), paste in the text: revealopen
   
4. For the block’s link, you will use the same link for your “reveal” lightbox shortcode ID. For example, in the link field you could type in: #blueberries

2. Set up the shortcode and content for the lightbox

Now you’ll add the content that goes in the lightbox. Note that it does not matter where these blocks go on the page, though they should be placed together.

1. First, add an opening shortcode block to your page: [reveal id="blueberries"]]
   
2. Then, the content you want in the lightbox.
   
   This will be the content in your block. You can use any combination of blocks that will work well in a lightbox pop up.
   
3. Finally, a closing shortcode block: [[/reveal]

Reveal Shortcode Examples

Hope you find this one useful.