Lightbox media viewer - photodow/wiki-helpers 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.

annotated-lightbox-media-viewer

Table of contents
  - [Events](#user-content-events)

Dependencies (5)

Used by (4)

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


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.

image 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.

image 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.

image 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

lightbox-media-viewer


Back to top


⚠️ **GitHub.com Fallback** ⚠️