Lightbox
Type of content
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
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
Embedded content
Assign class .bmd-lightbox-embed
to show embedded content inside of lightbox.
Vimeo Link
Facebook Video Link
Daily Motion Link
Live Leak Link
Other might possibly work too
Galleries
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 forimg
tag.bmd-lightbox-video
- will generate proper markup forvideo
tag.bmd-lightbox-iframe
- will generate proper markup foriframe
tag.bmd-lightbox-embed
- will generate proper markup foriframe
with embed tag.bmd-lightbox-inline
- will generate proper markup fordiv
tag.bmd-lightbox-ajax
- will generate proper markup fordiv
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 wrapperimgClass
- a class for links to display image content in lightboxvideoClass
- a class for links to display local video content in lightboxiframeClass
- a class for links to display iframe content in lightboxembedClass
- a class for links to display embedded content in lightboxinlineClass
- a class for links to display inline elements a lightboxloader
- inline style for loader image/iconminSize
- a minimum size of content wrapperwidth
- a default width of content can be set individually per item with data attributeheight
- 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 itemdata-bmd-lightbox-height
- make possible to set content height per itemdata-bmd-lightbox-gallery
- enables grouping of links into galleries