Vue Bootstrap LightBox MDB Pro component

Vue Lightbox - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

The mdbLightbox component uses touch events on mobile screens. Add add the following import statement in your main.js file:

        
            
        import Vue2TouchEvents from 'vue2-touch-events';
        Vue.use(Vue2TouchEvents);

Basic example

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

        
            
        <template>
          <mdb-lightbox :imgs="imgs" gallery></mdb-lightbox>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbLightbox
          } from 'mdbvue';
          export default {
            components: {
              mdbLightbox
            },
            data() {
              return {
                imgs: [
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp',
                  'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).webp'
                ],
              };
            }
          }
        </script>

LVue 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

        
            
      <script>
        import {
          mdbLightbox
        } from 'mdbvue';
      </script>

API Reference: Properties

Name Type Default Description Example
imgs Array An array of objects (data structure below) or strings (full-size images to open after lightbox launch - old syntax) <mdb-lightbox :imgs="imgs" gallery/>
gallery Boolean false If set to true, component will render a gallery of all images as well (basing on the thumbnail value) <mdb-lightbox :imgs="imgs" gallery/>
columns Number 3 Changes the number of columns in the gallery <mdb-lightbox :imgs="imgs" gallery :columns="4"/>
gap Boolean false Adds a gap between images in the gallery <mdb-lightbox :imgs="imgs" gallery gap/>
imgClass String Adds a class to the images in the gallery <mdb-lightbox :imgs="imgs" gallery imgClass="z-index-1"/>
imgs Array {} An array of objects (data structure below ) of strings (full-size images to open after lightbox launch) <mdb-lightbox :imgs="imgs"/>
index (old syntax) Number 0 Index of element, which has to be opened <mdb-lightbox :imgs="imgs" :index="index" />
visible (old syntax) Boolean false Determines whether to open the lightbox <mdb-lightbox :visible="true" ... />
captions (old syntax) Array An array of captions corresponding to images at the same index. <mdb-lightbox :captions="['title1', 'title2']" />

Data structure 

        
            
    const imgs = [
      {
        img: "Image's source (fullsize)",
        thumbnail: "Image's source (minature)",
        caption: "Image's caption"
      }
    ]

API Reference: Methods

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