MediaLightbox

Thumbnails that open a large view in a native dialog, with the keyboard and captions.

import { MediaLightbox } from '@zairakai/vue-components/Medias'

Usage

<MediaLightbox />

Props

Name	Type	Default	Description
id	string
class	string
items	array	[]	The images: { src, alt, caption, srcset, thumbnail }.
modelValue	boolean	undefined	Whether the large view is open.
index	number	undefined	The index of the image shown in the large view.
thumbnails	boolean	true	Show the thumbnails that open it. Turn off to open it from your own buttons with v-model.
loop	boolean	true
title	string	'Image viewer'
previousLabel	string	'Previous image'
nextLabel	string	'Next image'
openLabel	string	'View {alt}'

Events

Name	Description
update:modelValue
update:index

Slots

Name	Description
caption

See Theming for the class hooks and the data-* state of the components.