Lightbox

Background gradient of any elements can have easily changed color, direction or start by adding its corresponding classes. The color palette is taken from material design colors.

Type of content

Image

Assign class .bmd-lightbox-img to link to open image in lightbox.

Local Video

Assign class .bmd-lightbox-video to link to open local video in lightbox.

Iframe

Assign class .bmd-lightbox-iframe to link to open website inside of lightbox. You may need to adjust width and height. You can use data attributes data-bmd-lightbox-width and data-bmd-lightbox-height. The same works well for Google Maps and for Google street view

Inline content

Assign class .bmd-lightbox-inline to show inline content inside of lightbox. Place inline content right after the link and assign it class .bmd-lightbox-inline-content and set style attribute to display:none to hide it

AJAX content

Assign class .bmd-lightbox-ajax to show remote content inside of lightbox.

Embedded content

Assign class .bmd-lightbox-embed to show embedded content inside of lightbox.

Other might possibly work too

Galleries

How to build galleries

To sort Links into galleries/sets you need to assign data-bmd-lightbox-gallery attribute with gallery identifier e.g.data-bmd-lightbox-gallery="gal1", data-bmd-lightbox-gallery="gal2", data-bmd-lightbox-gallery="gal3", ...

Initialization

To make lightbox attach itself to elements with predefined classes you have to initialize it:

const lightbox = new BMDLightbox();

Plugin will attach event listener to elements with following classes:

.bmd-lightbox-img - will generate proper markup for img tag
.bmd-lightbox-video - will generate proper markup for video tag
.bmd-lightbox-iframe - will generate proper markup for iframe tag
.bmd-lightbox-embed - will generate proper markup for iframe with embed tag
.bmd-lightbox-inline - will generate proper markup for div tag
.bmd-lightbox-ajax - will generate proper markup for div tag and loads remote content

Options

You can pass custom values to options with initialization of lightbox:

const lightbox = new BMDLightbox({containerClass: 'some-class'});

List of available options:

containerClass - a class to apply for lighbox wrapper
imgClass - a class for links to display image content in lightbox
videoClass - a class for links to display local video content in lightbox
iframeClass - a class for links to display iframe content in lightbox
embedClass - a class for links to display embedded content in lightbox
inlineClass - a class for links to display inline elements a lightbox
loader - inline style for loader image/icon
minSize - a minimum size of content wrapper
width - a default width of content can be set individually per item with data attribute
height - a default height of content can be set individually per item with data attribute

Data attributes

You can pass custom values to options with initialization of lightbox or you can use data attributes to change width or height per item. List of available data attributes:

data-bmd-lightbox-width - make possible to set content width per item
data-bmd-lightbox-height - make possible to set content height per item
data-bmd-lightbox-gallery - enables grouping of links into galleries