Component: lightbox (image viewer) final design

[jeffchew]

Wonil-Suh1 created the following on Aug 06:

User story

As a user of IBM.com, I'd like to see images such as product shots and diagrams in a larger format, and flip through multiple when there are multiple without opening a new window/tab or going to a new page.

This task

This task is to pick up the design direction identified in the study task #324 and finalize the design with the goal of user testing it in the next task (#XXX).

Notes

A typical interaction pattern is as follows:

1. User reads description on a feature band with an image
2. User clicks the embedded image in the band
3. A lightbox opens with the image.
4. The customer is able to cycle through multiple images when applicable.

This component will likely utilize the modal component, and implement mechanisms for slideshow, displaying descriptions, etc.

Component design folder

https://ibm.box.com/s/mpeo1wy0jogkwxn68fahlg62q799ixox

Functional specs

https://github.com/photodow/ibm-dotcom-library/wiki/%5Bfs%5D-Media-Viewer

Example

Here is a lightly updated design from last year's Duo + STUF studies:

Original issue: https://github.ibm.com/webstandards/digital-design/issues/1386

[wonilsuhibm]

The latest design iteration: lightbox--1.0.0--output.pdf

[wonilsuhibm]

Latest design files are here: https://ibm.box.com/s/mpeo1wy0jogkwxn68fahlg62q799ixox

[wonilsuhibm]

The final designs are captured in this Box folder: https://ibm.box.com/s/mpeo1wy0jogkwxn68fahlg62q799ixox