Lightbox

BsLightbox is a modal image gallery component that is used to display a collection of images and videos.

Updated in v2.2.0

Overview

BsLightbox uses <bs-overlay> component internally and can be closed using the ESC key (enabled by default), or clicking the backdrop (enabled by default). BsLightbox has previous/next controls, indicator and toolbar buttons enabled by default. Data sources is provided via items property. Additionally, you can use arrow key left/right as navigation.

Images and Videos

BsLightbox can also be used to display youtube, video or image. To achieve this, you must set the source type correctly on the Lightbox data source.

Added in v2.2.0

Single Image

BsLightbox can also be used to display single modal image. To achieve this, you have to sets show-counter, show-nav-control, and show-thumbnail property to false. Additionally, you can also sets show-toolbar property to false, if you don't need any toolbar buttons.

Custom Toolbar

BsLightbox toolbar buttons can be customized to some extent. Additionally, you can add custom menus to your needs via menubar slot and enable the menubar button via toolbar property to make the custom menus work correctly. Some buttons do not perform any action, only trigger an event. You must provide your own method for these buttons. The buttons that don't provide any actions are: download, delete and info buttons.

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-lightbox-container for better customization.

Updated in v2.2.0

.md-lightbox-container {
  --md-lightbox-element-padding-x: #{vars.$padding-sm};
  --md-lightbox-display-bg: ;
  --md-lightbox-toolbar-bg: #{color.change(colors.$black, $alpha: 0.9)};
  --md-lightbox-toolbar-color: oklch(55.6% 0 89.876);
  --md-lightbox-overlay-bg: oklch(20% 0 0);
  --md-lightbox-title-bg: #{color.change(colors.$black, $alpha: 0.7)};
  --md-lightbox-title-color: oklch(65% 0 0);
  --md-lightbox-title-size: 1.25rem;
  --md-lightbox-thumbnail-bg: #{color.change(colors.$black, $alpha: 0.95)};
  --md-lightbox-thumbnail-border: #{1px solid color.change(colors.$black, $alpha: 0.6)};
  --md-lightbox-thumbnail-opacity: 0.5;
  --md-lightbox-thumbnail-active-border-color: #{colors.$red-base};
  --md-lightbox-thumbnail-active-border-width: 2px;
}

API Reference

Property	Type	Default	Description
esc-close	Boolean	true	Close Lightbox when ESC key is pressed.
items	TLightboxSource[]		Lightbox source dataset.
open v-model	Boolean	false	Show or hide the lightbox.
overlay	Boolean	true	Show backdrop overlay or not.
overlay-click-close	Boolean	true	Close Lightbox when the backdrop is clicked. v2.0.0
show-counter	Boolean	true	Show or hide indicator counter.
show-item-title	Boolean	true	Show or hide active item image title.
show-nav-control	Boolean	true	Show or hide navigation controls.
show-thumbnail	Boolean	true	Show or hide image thumbnails.
show-toolbar	Boolean	true	Show or hide toolbar buttons.
thumbnail-height	Number	72	Default image thumbnails height.
toolbar	TLightboxToolbarItems		Configure the toolbar buttons. Defaults value: {'download': false, 'zoom': true, 'rotate': true, 'info': true, 'delete': true, 'menubar': false, 'close': true}
transition	String	'slide-top-bottom'	Transition animation name when showing the active image. Available transitions are: fade, scale, slide-fade, slide-fade-reverse, slide-bottom-top, slide-top-bottom, slide-left-right, slide-right-left.
transition-mode	String		Controls the timing sequence of leaving/entering transitions. Available modes are out-in and in-out.
viewer-class	String|String[]		Additional css class name for active image or video. v2.2.0
viewer-styles	Object		Additional css styles for active image or video. v2.2.0
z-index	Number		Insert inline css style z-index to control the component positioning on the html layers. v2.0.15

Name	Arguments	Description
change	(activeItem:TLightboxSource, newIndex:Number)	Triggers when active item is changed.
close		Triggers when Lightbox is closed.
exec-delete	(item:TLightboxSource)	Triggers when button DELETE is clicked.
exec-download	(item:TLightboxSource)	Triggers when button DOWNLOAD is clicked.
exec-info	(item:TLightboxSource)	Triggers when button INFO is clicked.
exec-rotate-left	(item:TLightboxSource, rotate:Number)	Triggers when button ROTATE-LEFT is clicked.
exec-rotate-right	(item:TLightboxSource, rotate:Number)	Triggers when button ROTATE-RIGHT is clicked.
exec-zoomin	(item:TLightboxSource, zoom:Number)	Triggers when button ZOOM-IN is clicked.
exec-zoomout	(item:TLightboxSource, zoom:Number)	Triggers when button ZOOM-OUT is clicked.
update:open	(state:Boolean)	Used to update the open property.

Name	Description
menubar	The outlet slot used to place the toolbar button menus.

Method	Description
setActive(index:Number)	Change the active item.
openAt(index:Number)	Open modal lightbox at the given index.
nextSlide()	Navigate slide at next to the active item.
prevSlide()	Navigate slide at prior to the active item.