msc-lightbox

 

<msc-lightbox /> is a lightbox effect component. Developers could set trigger & content through it. Once user press trigger, content will display as lightbox effect.

!

Basic Usage

<msc-lightbox /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-lightbox />'s html structure and everything will be all set.

- Required Script

``html

`

- Structure

Put <msc-lightbox /> into HTML document.

`html

type="button"
slot="trigger"
>
SHOW IMAGE


src="your-image-path.png"
loading="lazy"
slot="content"
/>

`

Remember set [slot=trigger] and [slot=content] inside <msc-lightbox /> as its children. Content element will popup when user press trigger element.

JavaScript Instantiation

<msc-lightbox /> could also use JavaScript to create DOM element. Here comes some examples.

`html

`

Style Customization

<msc-lightbox /> uses CSS custom properties to hook control panel's theme. That means developer could easy change it into the looks you like.

`html

`

Property

| Property Name | Type | Description |
| ----------- | ----------- | ----------- |
| open | Boolean | Getter <msc-lightbox />'s open state. |

Events


| Event Signature | Description |
| ----------- | ----------- |
| msc-lightbox-beforetoggle | Fired before <msc-lightbox /> is shown or hidden. Developers could gather state information through event.detail. |
| msc-lightbox-toggle | Fired when <msc-lightbox /> is shown or hidden. Developers could gather state information through event.detail`. |

Mathods

| Mathod Signature | Description |
| ----------- | ----------- |
| showPopover() | Show <msc-lightbox />. |
| hidePopover() | Hide <msc-lightbox />. |
| togglePopover(force) | Toggle <msc-lightbox /> show or hide. (force is optional, developers could set boolean to force show or hide.) |

Reference

- <msc-lightbox /> demo
- YouTube tutorial
- WEBCOMPONENTS.ORG
- Popover API
- <video>: The Video Embed element