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.

Check the following buttons and take a look what can <msc-lightbox /> do ?

Tutorial

Chekc the following tutorial and see how <msc-lightbox /> work.

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

<script type="module" src="https://unpkg.com/msc-lightbox/mjs/wc-msc-lightbox.js"> </script>

Structure

Put <msc-lightbox /> into HTML document.

<msc-lightbox> <button type="button" slot="trigger" > SHOW IMAGE </button> <img src="your-image-path.png" loading="lazy" slot="content" /> </msc-lightbox>

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.

<script type="module"> import { MscLightbox } from 'https://unpkg.com/msc-lightbox/mjs/wc-msc-lightbox.js'; const templateTrigger = document.querySelector('template[data-type=trigger]'); const templateContent = document.querySelector('template[data-type=content]'); //use DOM api const nodeA = document.createElement('msc-lightbox'); document.body.appendChild(nodeA); nodeA.appendChild(templateTrigger.content.cloneNode(true)); nodeA.appendChild(templateContent.content.cloneNode(true)); // new instance with Class const nodeB = new MscLightbox(); document.body.appendChild(nodeB); nodeB.appendChild(templateTrigger.content.cloneNode(true)); nodeB.appendChild(templateContent.content.cloneNode(true)); </script>

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.

<style> msc-lightbox { --msc-lightbox-backdrop-background: rgba(0 0 0/.8); --msc-lightbox-border-radius: 12px; --msc-lightbox-background: rgba(255 255 255); --msc-lightbox-margin: 12px; --msc-lightbox-padding: 12px; --msc-lightbox-box-shadow: 0 0 2px rgba(0 0 0/.05); --msc-lightbox-button-size: 40; --msc-lightbox-button-inset: 8px 8px auto auto; --msc-lightbox-button-icon-color: rgba(255 255 255); --msc-lightbox-button-background-normal: rgba(0 0 0/.5); --msc-lightbox-button-background-active: rgba(0 0 0/.8); --msc-lightbox-button-active-scale: .8; } </style>

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