Rate this docs

Vue Bootstrap LightBox MDB Pro component

Vue Lightbox - Bootstrap 4 & Material Design

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

Basic example 



<template>
  <div>
    <mdb-container class="mt-5">
      <mdb-row class="mdb-lightbox no-margin"> 
        <mdb-col md="4" @click.native="show(0)">
          <figure>
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).jpg" class="img-fluid" alt="">
          </figure>
        </mdb-col>
        <mdb-col md="4" @click.native="show(1)">
          <figure>
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg" class="img-fluid" alt="">
          </figure>
        </mdb-col>
        <mdb-col md="4" @click.native="show(2)">
          <figure>
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" alt="">
          </figure>
        </mdb-col>
        <mdb-col md="4" @click.native="show(3)">
          <figure>
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg" class="img-fluid" alt="">
          </figure>
        </mdb-col>
        <mdb-col md="4" @click.native="show(4)">
          <figure>
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg" class="img-fluid" alt="">
          </figure>
        </mdb-col>
        <mdb-col md="4" @click.native="show(5)">
          <figure>
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg" class="img-fluid" alt="">
          </figure>
        </mdb-col>
        <mdb-col md="4" @click.native="show(6)">
          <figure>
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg" class="img-fluid" alt="">
          </figure>
        </mdb-col>
        <mdb-col md="4" @click.native="show(7)">
          <figure>
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="">
          </figure>
        </mdb-col>
        <mdb-col md="4" @click.native="show(8)">
          <figure>
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).jpg" class="img-fluid" alt="">
          </figure>
        </mdb-col>
      </mdb-row>
    </mdb-container>
    <mdb-lightbox
      :visible="visible"
      :imgs="imgs"
      :index="index"
      @hide="handleHide"
    ></mdb-lightbox>
  </div>
</template>

<script>
import { mdbLightbox, mdbContainer, mdbRow, mdbCol } from 'mdbvue';

export default {
  components: {
    mdbLightbox,
    mdbContainer,
    mdbRow,
    mdbCol
  },
  data() {
    return {
      imgs: [
        'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg',
        'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg',
        'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg',
        'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg',
        'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg',
        'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg',
        'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg',
        'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg',
        'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg'
      ],
      visible: false,
      index: 0 
    };
  },
  methods: {
    show(index) {
      this.index = index;
      this.visible = true;
    },
    handleHide() {
      this.visible = false;
    }
  }
};
</script>

<style scoped>
</style>

Lightbox - API

In this section you will find advanced information about the Lightbox component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement


import { mdbLightbox } from 'mdbvue';

API Reference: Properties

Name Type Default Description Example
imgs Array {} An array of full-size images to open after lightbox launch imgs: ['https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg', ...]
index Number 0 Index of element, which has to be opened :index=0
visible Boolean false Determines whether to open the lightbox <mdb-lightbox :visible="true" ... />

API Reference: Methods

Name Parameters Description Example
@hide Evokes afeter closing the lightbox <mdb-lightbox @hide="handleHide" ... />