Lightbox

Vue Lightbox component

Responsive lightbox built with the latest Bootstrap 5 and Vue 3. Lightbox is a responsive gallery with the option to enlarge selected photos.

MDB lightbox is a group of images combined in one responsive gallery. Elements are grouped in a thumbnail grid, which can be displayed as a slideshow.

Note: Read the API tab to find all available options and advanced customization

Basic example

A basic example of a lightbox with the most common use case with the bootstrap grid.

Lightbox image 1
Lightbox image 2
Lightbox image 3 
<template>
  <MDBLightbox>
    <MDBRow>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
          alt="Lightbox image 1"
          class="w-100"
        />
      </MDBCol>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
          alt="Lightbox image 2"
          class="w-100"
        />
      </MDBCol>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
          alt="Lightbox image 3"
          class="w-100"
        />
      </MDBCol>
    </MDBRow>
  </MDBLightbox>
</template>
<script>
  import { MDBLightbox, MDBLightboxItem, MDBCol, MDBRow } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBCol,
      MDBRow
    }
  };
</script>
<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem, MDBCol, MDBRow } from 'mdb-vue-ui-kit';
</script>

Image optimization

To ensure the proper performance of the page, it is recommended to include thumbnails of images in the src attribute. Then in the fullScreenSrc property add the path to the image with higher resolution. If the fullScreenSrc property is omitted, the lightbox will display the same image as in the reduced size. 

<template>
  <MDBLightbox>
    <MDBLightboxItem
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
      fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
      alt="Lightbox image 1"
      class="w-100"
    />
  </MDBLightbox>
</template>
<script>
  import { MDBLightbox, MDBLightboxItem } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem
    }
  };
</script>
<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem } from 'mdb-vue-ui-kit';
</script>

Shadows and rounded corners

You can improve the look of the images by adding shadows and rounded corners.

Lightbox image 1
Lightbox image 2
Lightbox image 3 
<template>
  <MDBLightbox>
    <MDBRow>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
          alt="Lightbox image 1"
          class="w-100 shadow-1-strong rounded"
        />
      </MDBCol>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
          alt="Lightbox image 2"
          class="w-100 shadow-1-strong rounded"
        />
      </MDBCol>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
          alt="Lightbox image 3"
          class="w-100 shadow-1-strong rounded"
        />
      </MDBCol>
    </MDBRow>
  </MDBLightbox>
</template>
<script>
  import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBRow,
      MDBCol
    }
  };
</script>
<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
</script>

Different sizes

Loaded images can have any aspect ratio. Their size will be automatically adjusted to the window when you open the lightbox.

Lightbox image 1 Lightbox image 2
Lightbox image 3 
<template>
  <MDBLightbox>
    <MDBRow>
      <MDBCol lg="6">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
          alt="Lightbox image 1"
          class="w-100 mb-2 mb-md-4"
        />
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Square/1.webp"
          alt="Lightbox image 2"
          class="w-100"
        />
      </MDBCol>
      <MDBCol lg="6">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Vertical/1.webp"
          alt="Lightbox image 3"
          class="w-100"
        />
      </MDBCol>
    </MDBRow>
  </MDBLightbox>
</template>
<script>
  import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBRow,
      MDBCol
    }
  };
</script>
<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
</script>

Zoom level

The zoomLevel attribute allows you to define the size of a single zoom in / zoom out.

Lightbox image 1
Lightbox image 2
Lightbox image 3 
<template>
  <MDBLightbox zoomLevel="0.25">
    <MDBRow>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
          alt="Lightbox image 1"
          class="w-100"
        />
      </MDBCol>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
          alt="Lightbox image 2"
          class="w-100"
        />
      </MDBCol>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
          alt="Lightbox image 3"
          class="w-100"
        />
      </MDBCol>
    </MDBRow>
  </MDBLightbox>
</template>
<script>
  import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBRow,
      MDBCol
    }
  };
</script>
<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
</script>

Disabled image

By adding a disabled property to the MDBLightboxItem component, you can exclude it from your lightbox. In the example below, the third image has been disabled.

Lightbox image 1
Lightbox image 2
Disabled image
Lightbox image 3 
<template>
  <MDBLightbox>
    <MDBRow>
      <MDBCol lg="3">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
          alt="Lightbox image 1"
          class="w-100"
        />
      </MDBCol>
      <MDBCol lg="3">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
          alt="Lightbox image 2"
          class="w-100"
        />
      </MDBCol>
      <MDBCol lg="3">
        <MDBLightboxItem
          disabled
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
          alt="Disabled image"
          class="w-100"
        />
      </MDBCol>
      <MDBCol lg="3">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/4.webp"
          alt="Lightbox image 3"
          class="w-100"
        />
      </MDBCol>
    </MDBRow>
  </MDBLightbox>
</template>
<script>
  import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBRow,
      MDBCol
    }
  };
</script>
<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
</script>

Captions

Image captions can be added using the caption property on MDBLightboxItem. If it is not set, the data is taken from the alt attribute. 

<template>
  <MDBLightbox>
    <MDBLightboxItem
      caption="Image caption"
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
      fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
      alt="Lightbox image 1"
      class="w-100"
    />
  </MDBLightbox>
</template>
<script>
  import { MDBLightbox, MDBLightboxItem } from 'mdb-vue-ui-kit';
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem
    }
  };
</script>
<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem } from 'mdb-vue-ui-kit';
</script>

Outside access

The lightbox can be successfully operated via JavaScript. There are many public methods available such as open, slide, zoomIn, zoomOut, or close. All are described in the API tab. 

<template>
  <MDBLightbox ref="lightboxRef">
    <MDBRow>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
          alt="Lightbox image 1"
          class="w-100"
        />
      </MDBCol>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
          alt="Lightbox image 2"
          class="w-100"
        />
      </MDBCol>
      <MDBCol lg="4">
        <MDBLightboxItem
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
          fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
          alt="Lightbox image 3"
          class="w-100"
        />
      </MDBCol>
    </MDBRow>
  </MDBLightbox>
  <div class="text-center mt-3">
    <MDBBtn color="primary" @click="lightboxRef?.open(1)">
      Open second image
    </MDBBtn>
  </div>
</template>
<script>
  import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from "vue";
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBRow,
      MDBCol,
      MDBBtn
    },
    setup() {
      const lightboxRef = ref(null);

      return {
        lightboxRef,
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from "vue";

  const lightboxRef = ref<InstanceType<typeof MDBLightbox> | null>(null);
</script>

Lightbox - API

Import

<script>
  import {
    MDBLightbox,
    MDBLightboxItem,
  } from 'mdb-vue-ui-kit';
</script>

Properties

MDBLightbox

Name Type Default Description
tag String 'div' Defines tag of the MDBLightbox element
zoomLevel Number | String Defines zoom level while zooming in or out.

MDBLightboxItem

Name Type Default Description
tag String 'img' Defines tag of the MDBLightboxItem element
fullScreenSrc String Defines regular image to load when gallery is open. If not set, the value of src attribute is taken.
caption String Defines caption of the image. If not set, the value of alt attribute is taken.
disabled Boolean false Sets image disabled and not showing in the lightbox

Methods

Name Parameters Description
open target Opens the gallery and activates image set by the target key. Default is the first image.
slide target Slides an image in the gallery. Available options: left, right, first, last. Dafault is right direction.
zoomIn Zooms in active image by one level.
zoomOut Zooms out active image by one level.
toggleFullscreen Toggles fullscreen.
reset Resets changed parameters such as position, zoom or fullscreen.
close Closes the gallery. 
<template>
  <MDBLightbox ref="testLightbox"/>
  <MDBBtn
    @click.stop="testLightbox?.open(1)"
    color="primary"
    size="sm"
  >
    Open
  </MDBBtn>
</template>
<script>
  import { MDBLightbox } from 'mdb-vue-ui-kit';

  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBCol,
      MDBRow
    },
    setup() {
      const testLightbox = ref(null);

      return {
        textLightbox,
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBLightbox } from 'mdb-vue-ui-kit';

  const testLightbox = ref<InstanceType<typeof MDBLightbox> | null>(null);
</script>

Events

Name Description
open Emitted when a lightbox has been toggled.
opened Emitted when a lightbox is opened.
slide Emitted when a lightbox has been slided.
slided Emitted after an image slide.
zoom-in Emitted when an image has been zoom in.
zoomed-in Emitted after an image is zoomed in.
zoom-out Emitted when an image has been zoom out.
zoomed-out Emitted after an image is zoomed out.
close Emitted when a lightbox has been toggled.
closed Emitted when a lightbox is closed. 
<template>
  <MDBLightbox @opened="opened" />
</template>
<script>
  import { MDBLightbox } from 'mdb-vue-ui-kit';

  export default {
    components: {
      MDBLightbox,
    },
    setup() {
      const opened = () => alert('Lightbox opened');

      return {
        opened
      }
    }
  }
</script>
<script setup lang="ts">
  import { MDBLightbox } from 'mdb-vue-ui-kit';

  const opened = () => alert('Lightbox opened');
</script>

CSS variables

As part of MDB’s evolving CSS variables approach, lightbox now uses local CSS variables on .lightbox-gallery for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

// .lightbox-gallery
--#{$prefix}lightbox-zindex: #{$lightbox-zindex};
--#{$prefix}lightbox-toolbar-zindex: #{$lightbox-toolbar-zindex};
--#{$prefix}lightbox-gallery-background-color: #{$lightbox-gallery-background-color};
--#{$prefix}lightbox-gallery-transition: #{$lightbox-gallery-transition};
--#{$prefix}lightbox-gallery-toolbar-height: #{$lightbox-gallery-toolbar-height};
--#{$prefix}lightbox-gallery-toolbar-transition: #{$lightbox-gallery-toolbar-transition};
--#{$prefix}lightbox-gallery-toolbar-button-width: #{$lightbox-gallery-toolbar-button-width};
--#{$prefix}lightbox-gallery-toolbar-button-height: #{$lightbox-gallery-toolbar-button-height};
--#{$prefix}lightbox-gallery-toolbar-button-color: #{$lightbox-gallery-toolbar-button-color};
--#{$prefix}lightbox-gallery-toolbar-button-transition: #{$lightbox-gallery-toolbar-button-transition};
--#{$prefix}lightbox-gallery-toolbar-button-hover-color: #{$lightbox-gallery-toolbar-button-hover-color};
--#{$prefix}lightbox-gallery-toolbar-button-before-font-weight: #{$lightbox-gallery-toolbar-button-before-font-weight};
--#{$prefix}lightbox-gallery-content-top: #{$lightbox-gallery-content-top};
--#{$prefix}lightbox-gallery-content-left: #{$lightbox-gallery-content-left};
--#{$prefix}lightbox-gallery-content-width: #{$lightbox-gallery-content-width};
--#{$prefix}lightbox-gallery-content-height: #{$lightbox-gallery-content-height};
--#{$prefix}lightbox-gallery-arrow-width: #{$lightbox-gallery-arrow-width};
--#{$prefix}lightbox-gallery-arrow-transition: #{$lightbox-gallery-arrow-transition};
--#{$prefix}lightbox-gallery-arrow-button-width: #{$lightbox-gallery-arrow-button-width};
--#{$prefix}lightbox-gallery-arrow-button-height: #{$lightbox-gallery-arrow-button-height};
--#{$prefix}lightbox-gallery-arrow-button-color: #{$lightbox-gallery-arrow-button-color};
--#{$prefix}lightbox-gallery-arrow-button-transition: #{$lightbox-gallery-arrow-button-transition};
--#{$prefix}lightbox-gallery-arrow-button-hover-color: #{$lightbox-gallery-arrow-button-hover-color};
--#{$prefix}lightbox-gallery-arrow-button-before-font-weight: #{$lightbox-gallery-arrow-button-before-font-weight};
--#{$prefix}lightbox-gallery-button-focus-color: #{$lightbox-gallery-button-focus-color};
--#{$prefix}lightbox-gallery-image-transform: #{$lightbox-gallery-image-transform};
--#{$prefix}lightbox-gallery-image-transition: #{$lightbox-gallery-image-transition};
--#{$prefix}lightbox-gallery-counter-color: #{$lightbox-gallery-counter-color};
--#{$prefix}lightbox-gallery-counter-padding-x: #{$lightbox-gallery-counter-padding-x};
--#{$prefix}lightbox-gallery-caption-color: #{$lightbox-gallery-caption-color};
--#{$prefix}lightbox-gallery-caption-margin-x: #{$lightbox-gallery-caption-margin-x};
--#{$prefix}lightbox-gallery-caption-wrapper-height: #{$lightbox-gallery-caption-wrapper-height};
--#{$prefix}lightbox-gallery-loader-transition: #{$lightbox-gallery-loader-transition};

// .disabled-scroll
--#{$prefix}lightbox-disabled-scroll-media-padding-right: #{$lightbox-disabled-scroll-media-padding-right};

SCSS variables

$lightbox-zindex: 1100;
$lightbox-zindex-toolbar: 1110;

$lightbox-gallery-background-color: rgba(0, 0, 0, 0.9);
$lightbox-gallery-transition: all 0.3s ease-out;
$lightbox-gallery-toolbar-height: 50px;
$lightbox-gallery-toolbar-transition: opacity 0.4s;
$lightbox-gallery-counter-color: #b3b3b3;
$lightbox-gallery-counter-padding-x: 10px;
$lightbox-gallery-toolbar-button-width: 50px;
$lightbox-gallery-toolbar-button-height: 50px;
$lightbox-gallery-toolbar-button-color: #b3b3b3;
$lightbox-gallery-toolbar-button-transition: color 0.2s;
$lightbox-gallery-toolbar-button-hover-color: $white;
$lightbox-gallery-toolbar-button-before-font-weight: 900;
$lightbox-gallery-content-top: 50px;
$lightbox-gallery-content-left: $lightbox-gallery-content-top;
$lightbox-gallery-content-width: calc(100% - 100px);
$lightbox-gallery-content-height: $lightbox-gallery-content-width;
$lightbox-gallery-image-transform: scale(0.25);
$lightbox-gallery-image-transition: all 0.4s ease-out;
$lightbox-gallery-arrow-width: 50px;
$lightbox-gallery-arrow-transition: opacity 0.4s;
$lightbox-gallery-arrow-button-width: 50px;
$lightbox-gallery-arrow-button-height: 50px;
$lightbox-gallery-arrow-button-color: #b3b3b3;
$lightbox-gallery-arrow-button-transition: color 0.2s;
$lightbox-gallery-arrow-button-hover-color: $white;
$lightbox-gallery-arrow-button-before-font-weight: 900;
$lightbox-gallery-caption-wrapper-height: 50px;
$lightbox-gallery-caption-color: $white;
$lightbox-gallery-caption-margin-x: 10px;
$lightbox-gallery-loader-transition: opacity 1s;
$lightbox-gallery-button-focus-color: $white;
$lightbox-disabled-scroll-media-padding-right: 17px;