Lightbox media viewer

Decorator UI component

The Lightbox media viewer opens up a piece/series of content over the current page for a closer/detailed look. The background is dimmed to give focus to the content being interacted with. It's great for slideshows and galleries, or anywhere you might not have a lot of room to see the piece of media content in detail.

---

Table of contents

• Events
• 1. Expressive Modal
• 2. Viewer
• 2.1 Media
• Logic
• 2.2 Heading
• Logic
• 2.3 Copy
• Logic
• 2.4 Heading and copy
• Logic
• 3. Carousel
• Logic
• Example

Dependencies (5)

• Expressive modal
• Carousel
• Image
• Video
• Video service

Used by (4)

• CTA
• Card
• Image with caption
• Video

Back links (11)

CTA (5)

• ...Video service to populate the CTA and Lightbox media viewer's content if not provided, and launches within...
• ...content if not provided, and launches within the Lightbox media viewer to play the
• ...link type is clicked, it should launch the Lightbox media viewer and begin playing the video.
• ...The Lightbox media viewer's data model and component should be used in...
• ...in addition to the style chosen from below. See Lightbox media viewer

Card (1)

• ...Re-evaluate Lightbox media viewer

Video (5)

• ...to play video either on page or in Lightbox media viewer. Video allows custom override of all content...
• .../> Lightbox opens Lightbox media viewer ^{3](#3-lightbox-media-viewer)]}.
• ...| if string provided | Pass the string to Lightbox media viewer to override heading
• ...| if string provided | Pass the string to Lightbox media viewer to override copy
• ...See Lightbox media viewer for more

Resources

• r1: Box folder

---

Events

event	description
onOpen	Sets the Media Viewer's initial state. Start with the first piece of media unless otherwise specified.
onClose	Reset state of Media Viewer. (e.g. stop playing videos)

1. Expressive Modal

required component

The Expressive modal wraps the Viewer ^[2] or Carousel ^[3] content to be viewed, dims the background, and ultimately launches the experience based on a user's interaction.

See Expressive modal for more information

Back to top

2. Viewer

The viewer contains all the details for a given media object being viewed. It presents a large piece of media to be viewed with supporting heading and copy to provide the user with more information about what they are looking at.

See design specs ^[r1] for more information

2.1 Media

required component

Renders an Image or Video depending on what the adopters passes.

Logic

	Condition	Description
2.1.1	Image	If an Image is provided, render it as the main media piece.
2.1.2	Video ID	If a Video ID is provided use the Video service to get Video data and render

2.2 Heading

optional string

Logic

	Condition	Description
2.2.1	undefined (default)	heading is pre-filled by Video service's name if provided.
2.2.2	String provided	Adding a custom heading overrides any API call.

2.3 Copy

optional string

Logic

	Condition	Description
2.3.1	undefined (default)	copy here is pre-filled by Video service's description if provided.
2.3.2	String provided	Adding a custom copy overrides any API call.

2.4 Heading and copy

optional string

This section outlines how the combined content of heading ^[2.2], and copy ^[2.3] behave together.

Logic

	Condition	Description
2.4.1	y-overflow	If content exceeds the height of the viewer area then handle the overflow of content with scrolling and a gradient above and below.
2.4.3	y-overflow sm	No overflow needed at the small breakpoint if Carousel [3] isn't being used
2.4.2	y-overflow sm Carousel [3]	If Carousel [3] is included at the smallest breakpoint then the above [2.4.1] overflow is still in effect.

See design specs ^[r1] for more information

Back to top

3. Carousel

optional component

The Carousel component can be included to help view, and navigate between one or more pieces of media content.

Logic

	Condition	Description
3.1	2 or more media [2.1]	Carousel renders wrapping multiple viewer [2] to navigate through.
3.2	1 or less media [2.1]	Carousel does not render.

Example

Back to top