Reveal Lightbox - Basic Setup

1. When you drag your Reveal Lightbox Stack onto the page, you will see the above stack appear on your page.

2. There are two dropzones. The top one is the Launcher Content dropzone and the bottom one is the Lightbox Content dropzone. So, you will want to put the link in the Launcher Content area, and what you want to be in the lightbox in the Lightbox Content area. In the example below, I put a Foundation button into the Launcher Conetnt, and an image in the Lightbox Content.

This is what it looks like in preview:

And this is what it looks like when you click on the button to launch the lightbox

Here are some of the settings you can adjust with the stack and the settings you can choose:

Size - The size of the reveal lightbox. By default it is set to XLarge. The other settings are Tiny, Small, Medium, Large, XLarge, XXLarge, and Full Screen.

Rounded - the corner radius of the lightbox. By default it is set to square. You can change it to Round and Pill. If you want to adjust the amount of pixels set in Round, that setting is in the Site Styles stack.

Edge to Edge Content? - Makes the lightbox content go Edge to Edge. In the example above, you can see there is a border around the image.

Custom Style? - Allows you to customize the colors of the background, text, close X and lightbox. These normally get their settings from Site Styles, but if you want to make it custom, you can do that here. Clicking this box changes the settings, giving you the color options.

Open On Page Load? - Have the lightbox open on page load. A cookie is set so it only loads once per page load.

Launch External? - If you want to use something else, like a text link, you will want to check this box. It will also change the settings, so you can set the Reveal ID. Be sure if you are using more than one reveal lightbox on your page, that you have different Reveal IDs for each Lightbox, or one link will open them all. If you want more information, check out our Reveal Lightbox - Launching a lightbox with a text link FAQ.

Once you have all the settings and content set up, preview the page and see how it work.

Now go forth and make your websites great!