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 previewBasic 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>
Gallery with margins
Remove .no-margin
class to add a margins to your images.
<template>
<div>
<mdb-container class="mt-5">
<mdb-row class="mdb-lightbox">
<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>
Gallery with heading
My Projects
<template>
<div>
<mdb-container class="mt-5">
<h2 class="font-weight-bold my-5 text-center">My Projects</h2>
<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>
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" ... /> |