Lightbox media viewer - carbon-design-system/carbon-for-ibm-dotcom-website GitHub Wiki

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

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

Dependencies (5)

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

Used by (4)

• CTA
• Card
• Image with caption
• Video

Back links (15)

CTA (4)

• Lightbox media viewer's content if not provided, and launches within...
• ...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
• addition to the style chosen from below. See Lightbox media viewer

Card (1)

• Re-evaluate Lightbox media viewer

Image with caption (5)

• 1.0.1 | onClick && 4.0.2 | Launches the Lightbox media viewer 4 if...
• ...| 4.0.2 | String of text is passed to Lightbox media viewer's' 4...
• button icon is displayed only if the Lightbox media viewer
• ...| false | default disables the the use of Lightbox media viewer
• See Lightbox media viewer for more

Video (5)

• Lightbox media viewer. Video allows custom override of all content...
• .../> Lightbox opens Lightbox media viewer 3.
• ...| 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

---

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)

required component

The Expressive modal wraps the Viewer ² or Carousel ³ 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

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

required component

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

	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

optional string

	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.

optional string

	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.

optional string

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

	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

optional component

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

	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.

Back to top