Thumbs of images are created automatically.
To create a thumb of a different source or overwrite the default thumb's image (for example, with an equivalent image of smaller resolution for increased performance), provide the thumbs' URLs or paths to the "thumbs" array prop.
<FsLightbox
:sources="[
"/Images/1.jpg",
"/Images/2.jpg",
"https://www.youtube.com/watch?v=3nQNiWdeH2Q",
"/Videos/1.mp4"
]"
:thumbs="[
null, // The thumb will be created automatically.
"/Images/Thumbs/2.jpg", // The default thumb is being overwritten.
"/Images/Videos_Thumbs/1.jpg",
"/Images/Videos_Thumbs/2.jpg"
]"
/>When displaying videos, showing icons on thumbs may improve the user experience. It can be achieved using the "thumbsIcons" prop. It's an array of components
<FsLightbox
:sources="[
"https://www.youtube.com/watch?v=3nQNiWdeH2Q",
"/Videos/1.mp4"
]"
:thumbs="[
"/Images/Videos_Thumbs/1.jpg",
"/Images/Videos_Thumbs/2.jpg"
]"
:thumbsIcons="[
YouTubeIcon,
VideoIcon
]"
/>To show thumbs on the lightbox's open, set the "showThumbsOnMount" prop to "true".
<FsLightbox
:showThumbsOnMount="true"
/>To disable thumbs completely, set the "disableThumbs" prop to "true".
<FsLightbox
:disableThumbs="true"
/>