Lightbox

See examples of the contact form on page 11 or the action spots on the images of the camera on page 15:

The lightbox frame allows the dynamic content to take over the screen, until dismissed by the user. Since it appears on top, there is no need to fit the content into the layout of the page, and it takes the user's attention. This makes it very well suited for the following types of content, for example:

• game or quiz activity
• feedback form
• further details of a product or item
• store finder/map
• 360º view of an object, or virtual reality interior

Creation Process

To add a lightbox to a publication:

1. Create the content and place it in a ZIP file.
2. Upload the ZIP file to the publishing site via the Manage Files page, setting the Special Usage field to 'HTML OVerlay'.
3. Go to the Edit Pages page and select the page on which the lightbox should appear.
4. Add an overlay and set the type to 'HTML Lightbox' (see Adding Overlays).
5. Select the content file from the HTML ZIP dropdown.
6. Set the Index File dropdown to the main HTML file within the ZIP. (Unless the content contains multiple HTML files, this will be the only option available in the dropdown.)

The area covered by the overlay is the part which the user can tap to open the lightbox. It should therefore normally be placed over a button or icon image on the page which the user will be able to see is a tappable trigger.

Alternatively, the 'Lightbox image file' dropdown can be set to a suitable image; if so, this image is displayed on the page in the location defined by the overlay, as a trigger for the lightbox.

This assumes that the lightbox content should be embedded with the publication. If the content should instead of streamed from a remote URL, then set the URL field and leave the HTML ZIP file and Index File dropdowns set to None. Having content streamed in from an external site is useful in a few select use cases, most notably during the testing/production phase as changes made to any code with be reflected instantly, instead of having to re-upload the content and re-previewing the publication. Also, any content which would naturally be stream in, such as some kind of dynamic feed, or streaming video (e.g. Brightcove) should also be added in this manner.

Dimensions and layout

The lightbox frame always uses a 4:3 or 3:4 aspect ratio, according to whether the device is in landscape or portrait orientation.

On iOS the frame is a standard width and height, 80% of the actual device's screen (1638.4 x 1228.8px on iPad, 908.8 x 512px on iPhone 5, 768 x 512px on older iPhones and iPod Touches). On Android and desktop, the lightbox can be limited to a maximum width and height (by default, 1024 x 768px), but on smaller devices the lightbox will be restricted by the available space and will therefore render with a smaller width and height.

it is the content creator's responsibility to ensure that the lightbox content renders cleanly on all platforms and devices on which it will be viewed, and also in both orientations. Some options for making the content adapt to both orientations are:

1. As with any webpage, design the layout to reflow smoothly as the frame changes. Using the percentage dimensions is very useful in this regard.
2. Use CSS media selectors (see e.g. http://css-tricks.com/css-media-queries/) to toggle between different layouts. This allows the content to shift between a layout optimised for landscape and a layout optimised for portrait as the user turns the device, or for different phone-friendly / tablet-friendly / desktop-friendly versions of the layout to be displayed as appropriate.
3. If the content should only be viewed in one orientation, it's also possible to use media selectors to display a message saying, 'Please turn your device 90º' when in one orientation, and then display the content normally when the device is in the expected orientation.

Performance

The larger the size of the HTML content, the slower it will be to render when the user triggers the lightbox.

For this reason, any images or other assets should be optimised as far as possible without quality loss (for example, prefer JPG to PNG where transparency is not needed, avoid unnecessary include files).

If the content is unavoidably heavy, consider using a 'loader' - that is, have the content initially display a simple 'loading' animation or message, and then replace that with the correct content once it\'s ready. Using an HTML Package like Adobe Edge will allow you to add in a loader very simply.