Edit these docs Rate these 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.

Vue live preview

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>

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

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" ... />
captions Array An array of captions corresponding to images at the same index <mdb-lightbox :captions="['title1', 'title2']" />

API Reference: Methods

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