@miraidesigns/lightbox NPM

Lightbox

Lightbox creates a modal carousel from a set of media elements such as images or videos.

HTML

<a href="images/1.jpg" data-lightbox="id" data-lightbox-alt="Image alt description">
    <img src="images/1_thumbnail.jpg" alt="Image thumbnail">
</a>

Sass

// Include default styles without configuration
@forward '@miraidesigns/lightbox/styles';

// Configure appearance
@use '@miraidesigns/lightbox' with (
    $variable: value
);

@include lightbox.styles();

TypeScript

import { MDFLightbox } from '@miraidesigns/lightbox';

new MDFLightbox(document.querySelectorAll('[data-lightbox="id"]'), {
    icons: {
        type: 'svg',
        control: 'icons.svg#arrow-keyboard',
        close: 'icons.svg#clear'
    }
});

Implementation

Attributes

Name	Element	Description
`data-lightbox`	`<a>`	Lightbox id. Use this attribute to group elements together
`data-lightbox-title`	`<a>`	Set lightbox item title
`data-lightbox-description`	`<a>`	Set lightbox item description
`data-lightbox-alt`	`<a>`	Set `alt` attribute text for images
`data-lightbox-type`	`<a>`	Content type. Allowed values are `video` or `embed`

Classes

Name	Type	Description
`mdf-lightbox-container`	Parent	Contains the lightbox and backdrop
`mdf-lightbox-container--active`	Modifier	1. Prepares the lightbox to be visible
`mdf-lightbox-container--fade-in`	Modifier	2. Fades-in the lightbox and allows for interaction
`mdf-lightbox`	Parent / Child	Contains the header, items and controls. Child to `.mdf-lightbox-container`
`mdf-lightbox__items`	Parent / Child	Contains the lightbox items. Child to `.mdf-lightbox`
`mdf-lightbox__item`	Parent / Child	Lightbox item. Contains the item info and media element. Child to `.mdf-lightbox__items`
`mdf-lightbox__item--scale`	Modifier	Plays animation on item when opening the lightbox
`mdf-lightbox__info`	Parent / Child	Contains the title and description. Child to `.mdf-lightbox__item`
`mdf-lightbox__title`	Child	Item title. Child to `.mdf-lightbox__info`
`mdf-lightbox__description`	Child	Item description. Child to `.mdf-lightbox__info`
`mdf-lightbox__media-wrapper`	Parent / Child	Media wrapper element. Allows for scaling of videos and iframes. Child to `.mdf-lightbox__item`
`mdf-lightbox__media-wrapper--bordered`	Modifier	Add border to media element, used for iframes
`mdf-lightbox__media`	Child	Media element. Child to `.mdf-lightbox__media-wrapper`
`mdf-lightbox__control`	Child	Lightbox control button element. Child to `.mdf-lightbox`
`mdf-lightbox__control--close`	Modifier	`Close` button element
`mdf-lightbox__control--prev`	Modifier	`Previous` button element
`mdf-lightbox__control--next`	Modifier	`Next` button element
`mdf-lightbox-backdrop`	Child	Lightbox backdrop. Child to `.mdf-lightbox-container`

Events

Name	Data	Description
`MDFLightbox:opened`	`null`	Fires when the lightbox opens
`MDFLightbox:changed`	`{index: number, item: HTMLElement}`	Fires whenever the active lightbox item changes. Includes the item itself and its index
`MDFLightbox:closed`	`null`	Fires when the lightbox closes

Properties

Name	Type	Description
`.activeItem`	`HTMLElement`	Returns the current lightbox item on display
`.container`	`HTMLElement`	Returns the lightbox container element
`.index`	`number`	Returns the index of the current lightbox item
`.items`	`HTMLCollection`	Returns a `HTMLCollection` holding all lightbox items
`.itemsContainer`	`HTMLElement`	Returns the lightbox items container element
`.lightbox`	`HTMLElement`	Returns the lightbox element
`.links`	`HTMLLinkElement[]`	Returns an `Array` holding all lightbox links
`.refresh()`	`(): void`	Refresh the lightbox, adding new items without re-creating the entire lightbox element

Options

Name	Type	Default	Description
`onOpen`	`() => void`	`null`	Function will run when the lightbox is opened
`onChange`	`() => void`	`null`	Function will run when the lightbox item changes
`onClose`	`() => void`	`null`	Function will run when the lightbox is closed
`titlePos`	`string`	`bottom`	Set title position. Allowed values are `top` or `bottom`
`titleAlign`	`string`	`center`	Set title text alignment. Allowed values are `left` `center` or `right`
`iframeAddBorder`	`boolean`	`false`	Add border to embedded iframes
`sandboxing`	`boolean`	`false`	Enable sandboxing for iframes
`sandboxingRules`	`string`	`null`	See: HTML iframe sandbox Attribute
`enableSwipe`	`boolean`	`true`	Allow for navigation by swiping left and right on touch devices
`hideOnClick`	`boolean`	`true`	Lightbox will be hidden when clicked outside of it's content

mirai designs framework lightbox

@miraidesigns/base @miraidesigns/button @miraidesigns/fx @miraidesigns/helpers @miraidesigns/typography @miraidesigns/utils @vimeo/player @types/vimeo__player

@infinitebrahmanuniverse/nolb-_mir @everything-registry/sub-chunk-607 @zalastax/nolb-_mir

1.0.1

3 years ago

1.0.0

3 years ago