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 input.
<fslightbox
[sources]="[
"/Images/1.jpg",
"/Images/2.jpg",
"https://www.youtube.com/watch?v=3nQNiWdeH2Q",
"/Videos/1.mp4"
]"
[thumbs]="[
null,
"/Images/Thumbs/2.jpg",
"/Images/Videos_Thumbs/1.jpg",
"/Images/Videos_Thumbs/2.jpg"
]"
/>
Thumbs' icons
When displaying videos, showing icons on thumbs may improve the user experience. It can be achieved using the "thumbsIcons" input. 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 set a single icon for all thumbs, use the "thumbsIcon" input (values from the "thumbsIcons" array will take precedence).
<FsLightbox
[thumbsIcon]="VideoIcon"
[thumbsIcons]="[null,null,YouTubeIcon]"
/>
Display thumbs at start
To show thumbs on the lightbox's open, set the "showThumbsOnMount" input to "true".
<fslightbox
[showThumbsOnMount]="true"
/>
Show thumbs with captions
Preserve the display of captions when thumbs are opened.
<fslightbox
[showThumbsWithCaptions]="true"
/>
Disable thumbs
To disable thumbs completely, set the "disableThumbs" input to "true".
<fslightbox
[disableThumbs]="true"
/>
