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.

Image Link
Local Video

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

Video Link
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

Iframe Link
Google Street
Google Map
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

Inline Link
AJAX content

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

AJAX Link
Embedded content

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

Youtube Link
Vimeo Link
Facebook Video Link
Daily Motion Link
Live Leak Link
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