Responsive Lightbox Stack

A Lightbox That Resizes To Fit Computers and Smart Devices

This means that it will look good on a laptop or a smart phone.

In the past, lightboxes ran into problems when folks viewed them using devices they were not designed to handle, for example, on the small screen of a phone. This is no longer a problem.

What you can place inside Responsive Lightbox

Feel free to resize your browser window to simulate the sizes of different viewing devices.

1. Images - you can display individual images or create a gallery - One Image - Gallery
2. Web pages (by giving their URLs to Responsive Lightbox) - Click Me
3. Snippets of text - Click Me
4. YouTube video - Click Me
5. Vimeo video - Click Me
6. Google map - Click Me

- A customer got creative and added a Paypal "Add To Cart" button as well as a select box to the Lightbox's title. Click here to see her page and then click on any of the items on her page to see the Responsive Lightbox used as a shopping cart tool.

Typically, you have a piece of content on the page, which can be almost anything (e.g. a thumbnail image, a piece of text), which serves as a trigger.

When someone clicks on that piece of content, Responsive Lightbox appears. You decide what you want Responsive Lightbox to show. It can be a high-res version of an image, a video, a map, etc.

Due to its responsive nature, the dimensions of the Responsive Lightbox is automatically set based on the size of the viewing device, so there's no need for manual configuration of the dimensions. You can test this by resizing your browser window. Responsive Lightbox will automatically resize itself.

Video Tutorials

How To Use Warehoused Images (thanks to Langley for this solution)

Set the stack to "Inline", then either link it to the URL of the image on the warehouse server, or to RapidWeaver's Resources (if your image is there).

How To Display A YouTube Video

The Responsive Lightbox is opened when an object on the page is clicked. This can be text, or an image.

Adding The Trigger

Let's assume you have some text on the page. This piece of text is what you want users to be clicking on.

Select the text you want to use as the trigger. The trigger is what the users will click on to make the Responsive Lightbox show up. Remember that this can also be an image.

In the URL field, add a "#". Then click on the "+" button, and add a name called "id" and a unique value in the value field. This unique value cannot have spaces.

Then click "Set Link".

Making Responsive Lightbox Show A YouTube Video

In this example we're using Responsive Lightbox to display a YouTube Video when the trigger is clicked. After installing The Responsive Lightbox stack, drag in a "Responsive Lightbox: Click To Show" stack

On the right side, look for the Responsive Lightbox options and change the "Display" dropdown to "YouTube". In "URL To Show", enter the YouTube URL. The YouTube URL's format should look like this:

Stacks . Images & Videos . Social . Lightboxes . Layout . Publishing . Utilities .
Bundles .