Lightbox
What is a lightbox? How can I use one?
Goal:
Goal:
A lightbox consists of a smaller or thumbnail version of an image linked to a larger version that appears in a "pop-up” box, often with a small amount of text beneath the image. The larger version of the image and its text fill most of the space in the browser window and will resize automatically to fit browser width, causing students to focus on that one piece of instruction or information.
The text that appears above a lightbox activity should direct students to click on the image(s) and should ask a question or provide direction about what students should think about before and after they click each image.
Algebra II Sample
Take a closer look at the engineering marvels below. Click each picture, study its shapes carefully, and read the caption. What shape do all three structures rely on for strength?
Sample Formatting
How was this content formatted so that we can develop the content correctly?
[insert as lightboxes]
[Image 1: Shutterstock ID: 596604485]
[Text 1] The Golden Gate Bridge is a modern engineering marvel that provides stability through its unique curve shape. The main suspension cables between the towers curve up in the shape of a U called a parabola.
[Image 2: Shutterstock ID: 234082120]
[Text 2] Rollercoasters provide the thrill of daring height at high speeds by using curves. The most popular shape is a down curve in the shape of a U called a parabola.
[Image 3: Shutterstock: 607045796]
[Text 3] The Eiffel Tower base has a parabola to add stability and strength to its structure. It features a U-shaped symmetrical curve.
[end lightboxes]
Examples
Lightboxes can be used in all subject areas to provide a more interactive and readable presentation of content that is mostly visual in nature. They also allow students to examine the details in an image more closely. Instead of images, the larger pop-up windows in lightboxes can contain text only, videos, iframes, audio files, and PDF's. They can be single, standalone images or sets of images arranged in a “gallery” that can be clicked through once the lightbox is opened.
|
Math Sample |
View Example |
|
Language Arts Sample |
View Example |
|
Advanced Drawing Sample |
View Example |
Customizable Content
Below are the suggested specifications for using images and interactive components within this interactive.
| Optimization |
Constraints:
|
| Nested Interactives? |
| No. Image and text based content only. |
| Audio/Video? |
| Yes! Audio and video can be used in the revealed portion of the lightbox, but not the page display portion. |
Note: Interactive requests are subject to change, based on content type, image size and usability.
Formatting Template
To use a lightbox in one of your lessons, copy and paste the text shown below, and replace the placeholder text with your own.
[insert as lightboxes]
[Image 1: Shutterstock ID: #]
[Text_1] Content
[Image 2: Shutterstock ID: #]
[Text_2] Content
[Image 3: Shutterstock ID: #]
[Text_3] Content
[end lightboxes]