Lightbox
Vue Lightbox component
Responsive lightbox built with the latest Bootstrap 5 and Vue 3. Lightbox is a responsive gallery with the option to enlarge selected photos.
MDB lightbox is a group of images combined in one responsive gallery. Elements are grouped in a thumbnail grid, which can be displayed as a slideshow.
Note: Read the API tab to find all available options and advanced customization
Basic example
A basic example of a lightbox with the most common use case with the bootstrap grid.
<template>
<MDBLightbox>
<MDBRow>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Lightbox image 1"
class="w-100"
/>
</MDBCol>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Lightbox image 2"
class="w-100"
/>
</MDBCol>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Lightbox image 3"
class="w-100"
/>
</MDBCol>
</MDBRow>
</MDBLightbox>
</template>
<script>
import { MDBLightbox, MDBLightboxItem, MDBCol, MDBRow } from 'mdb-vue-ui-kit';
export default {
components: {
MDBLightbox,
MDBLightboxItem,
MDBCol,
MDBRow
}
};
</script>
Image optimization
To ensure the proper performance of the page, it is recommended to
include thumbnails of images in the src attribute. Then in the
fullScreenSrc property add the path to the image with
higher resolution. If the fullScreenSrc property is
omitted, the lightbox will display the same image as in the reduced
size.
<template>
<MDBLightbox>
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Lightbox image 1"
class="w-100"
/>
</MDBLightbox>
</template>
<script>
import { MDBLightbox, MDBLightboxItem } from 'mdb-vue-ui-kit';
export default {
components: {
MDBLightbox,
MDBLightboxItem
}
};
</script>
Shadows and rounded corners
You can improve the look of the images by adding shadows and rounded corners.
<template>
<MDBLightbox>
<MDBRow>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Lightbox image 1"
class="w-100 shadow-1-strong rounded"
/>
</MDBCol>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Lightbox image 2"
class="w-100 shadow-1-strong rounded"
/>
</MDBCol>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Lightbox image 3"
class="w-100 shadow-1-strong rounded"
/>
</MDBCol>
</MDBRow>
</MDBLightbox>
</template>
<script>
import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
export default {
components: {
MDBLightbox,
MDBLightboxItem,
MDBRow,
MDBCol
}
};
</script>
Different sizes
Loaded images can have any aspect ratio. Their size will be automatically adjusted to the window when you open the lightbox.
<template>
<MDBLightbox>
<MDBRow>
<MDBCol lg="6">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Lightbox image 1"
class="w-100 mb-2 mb-md-4"
/>
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Square/1.webp"
alt="Lightbox image 2"
class="w-100"
/>
</MDBCol>
<MDBCol lg="6">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Vertical/1.webp"
alt="Lightbox image 3"
class="w-100"
/>
</MDBCol>
</MDBRow>
</MDBLightbox>
</template>
<script>
import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
export default {
components: {
MDBLightbox,
MDBLightboxItem,
MDBRow,
MDBCol
}
};
</script>
Zoom level
The zoomLevel attribute allows you to define
the size of a single zoom in / zoom out.
<template>
<MDBLightbox zoomLevel="0.25">
<MDBRow>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Lightbox image 1"
class="w-100"
/>
</MDBCol>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Lightbox image 2"
class="w-100"
/>
</MDBCol>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Lightbox image 3"
class="w-100"
/>
</MDBCol>
</MDBRow>
</MDBLightbox>
</template>
<script>
import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
export default {
components: {
MDBLightbox,
MDBLightboxItem,
MDBRow,
MDBCol
}
};
</script>
Disabled image
By adding a disabled property to the
MDBLightboxItem component, you can exclude it from your
lightbox. In the example below, the third image has been disabled.
<template>
<MDBLightbox>
<MDBRow>
<MDBCol lg="3">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Lightbox image 1"
class="w-100"
/>
</MDBCol>
<MDBCol lg="3">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Lightbox image 2"
class="w-100"
/>
</MDBCol>
<MDBCol lg="3">
<MDBLightboxItem
disabled
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Disabled image"
class="w-100"
/>
</MDBCol>
<MDBCol lg="3">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/4.webp"
alt="Lightbox image 3"
class="w-100"
/>
</MDBCol>
</MDBRow>
</MDBLightbox>
</template>
<script>
import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
export default {
components: {
MDBLightbox,
MDBLightboxItem,
MDBRow,
MDBCol
}
};
</script>
Captions
Image captions can be added using the
caption property on MDBLightboxItem. If it
is not set, the data is taken from the alt attribute.
<template>
<MDBLightbox>
<MDBLightboxItem
caption="Image caption"
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Lightbox image 1"
class="w-100"
/>
</MDBLightbox>
</template>
<script>
import { MDBLightbox, MDBLightboxItem } from 'mdb-vue-ui-kit';
export default {
components: {
MDBLightbox,
MDBLightboxItem
}
};
</script>
Outside access
The lightbox can be successfully operated via JavaScript. There are
many public methods available such as open,
slide, zoomIn, zoomOut, or
close. All are described in the API tab.
<template>
<MDBLightbox ref="lightboxRef">
<MDBRow>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
alt="Lightbox image 1"
class="w-100"
/>
</MDBCol>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.webp"
alt="Lightbox image 2"
class="w-100"
/>
</MDBCol>
<MDBCol lg="4">
<MDBLightboxItem
src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.webp"
alt="Lightbox image 3"
class="w-100"
/>
</MDBCol>
</MDBRow>
</MDBLightbox>
<div class="text-center mt-3">
<MDBBtn color="primary" @click="$refs.lightboxRef.open(1)">
Open second image
</MDBBtn>
</div>
</template>
<script>
import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from "vue";
export default {
components: {
MDBLightbox,
MDBLightboxItem,
MDBRow,
MDBCol,
MDBBtn
},
setup() {
const lightboxRef = ref(null);
return {
lightboxRef
}
}
};
</script>
Lightbox - API
Import
<script>
import {
MDBLightbox,
MDBLightboxItem,
} from 'mdb-vue-ui-kit';
</script>
Properties
MDBLightbox
| Name | Type | Default | Description |
|---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBLightbox element |
zoomLevel
|
Number | String | |
Defines zoom level while zooming in or out. |
fontAwesome
|
String | 'free' |
Defines version of Font Awesome library. Available options are 'free' and 'pro'. |
MDBLightboxItem
| Name | Type | Default | Description |
|---|---|---|---|
tag
|
String | 'img' |
Defines tag of the MDBLightboxItem element |
fullScreenSrc
|
String | |
Defines regular image to load when gallery is open. If not set, the value of src attribute is taken. |
caption
|
String | |
Defines caption of the image. If not set, the value of alt attribute is taken. |
disabled
|
Boolean | false |
Sets image disabled and not showing in the lightbox |
Methods
| Name | Parameters | Description |
|---|---|---|
open |
target | Opens the gallery and activates image set by the target key. Default is the first image. |
slide |
target |
Slides an image in the gallery. Available options: left,
right, first, last. Dafault is right direction.
|
zoomIn |
Zooms in active image by one level. | |
zoomOut
|
Zooms out active image by one level. | |
toggleFullscreen
|
Toggles fullscreen. | |
reset |
Resets changed parameters such as position, zoom or fullscreen. | |
close |
Closes the gallery. |
<template>
<MDBLightbox ref="testLightbox"/>
<MDBBtn
@click.stop="$refs.testLightbox.open(1)"
color="primary"
size="sm"
>
Open
</MDBBtn>
</template>
Events
| Name | Description |
|---|---|
open |
Emitted when a lightbox has been toggled. |
opened |
Emitted when a lightbox is opened. |
slide |
Emitted when a lightbox has been slided. |
slided |
Emitted after an image slide. |
zoom-in |
Emitted when an image has been zoom in. |
zoomed-in |
Emitted after an image is zoomed in. |
zoom-out |
Emitted when an image has been zoom out. |
zoomed-out |
Emitted after an image is zoomed out. |
close |
Emitted when a lightbox has been toggled. |
closed |
Emitted when a lightbox is closed. |
<template>
<MDBLightbox @opened="opened" />
</template>
<script>
export default {
setup() {
const opened = () => {
alert('Lightbox opened')
}
return {
opened
}
}
}
</script>