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 previewThe 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
<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).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'
],
};
}
}
</script>
Gallery with margins
Add gap
property to your lightbox
<template>
<mdb-lightbox
:imgs="gallery"
gallery
gap
></mdb-lightbox>
</template>
<script>
import { mdbLightbox, mdbContainer, mdbRow, mdbCol } from 'mdbvue';
export default {
components: {
mdbLightbox,
mdbContainer,
mdbRow,
mdbCol
},
data() {
return {
gallery: [
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg'
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg'
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg'
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg'
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg'
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg'
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg'
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg'
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(146).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(146).jpg',
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg',
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(41).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(41).jpg',
},
{
thumbnail: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(43).jpg',
img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(43).jpg',
}
],
};
}
}
</script>
Photos with captions
<template>
<mdb-container>
<mdb-lightbox :imgs="captions" gallery></mdb-lightbox>
</mdb-container>
</template>
<script>
import { mdbLightbox, mdbContainer } from "mdbvue";
export default {
components: {
mdbLightbox,
mdbContainer,
},
data() {
return {
captions: [
{
img:
"https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(94).jpg",
caption:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate sequi corporis eaque corrupti. Vel, est."
},
{
img:
"https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(96).jpg",
caption:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate sequi corporis eaque corrupti. Vel, est."
},
{
img:
"https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(95).jpg",
caption:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate sequi corporis eaque corrupti. Vel, est."
},
{
img:
"https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(92).jpg",
caption:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate sequi corporis eaque corrupti. Vel, est."
},
{
img:
"https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(137).jpg",
caption:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate sequi corporis eaque corrupti. Vel, est."
},
{
img:
"https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(132).jpg",
caption:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate sequi corporis eaque corrupti. Vel, est."
},
{
img:
"https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(129).jpg",
caption:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate sequi corporis eaque corrupti. Vel, est."
},
{
img:
"https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(130).jpg",
caption:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate sequi corporis eaque corrupti. Vel, est."
},
{
img:
"https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(131).jpg",
caption:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate sequi corporis eaque corrupti. Vel, est."
}
]
};
},
};
</script>
Gallery with heading
<template>
<mdb-container>
<h2 class="font-weight-bold my-5 text-center">My Projects</h2>
<mdb-lightbox
:imgs="imgs"
gallery
gap
imgClass="z-depth-1"
></mdb-lightbox>
</mdb-container>
</template>
<script>
import { mdbLightbox, mdbContainer } from 'mdbvue';
export default {
components: {
mdbLightbox,
mdbContainer,
},
data() {
return {
imgs: [
{
thumbnail:
"https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(63).jpg",
img:
"https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(63).jpg"
},
{
thumbnail:
"https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(66).jpg",
img:
"https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(66).jpg"
},
{
thumbnail:
"https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(65).jpg",
img:
"https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(65).jpg"
},
{
thumbnail:
"https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg",
img:
"https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(67).jpg"
},
{
thumbnail:
"https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(68).jpg",
img:
"https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(68).jpg"
},
{
thumbnail:
"https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(64).jpg",
img:
"https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(64).jpg"
},
{
thumbnail:
"https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(69).jpg",
img:
"https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(69).jpg"
},
{
thumbnail:
"https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(59).jpg",
img:
"https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(59).jpg"
},
{
thumbnail:
"https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(70).jpg",
img:
"https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(70).jpg"
}
],
};
},
}
</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 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" ... /> |