Overlay

This gallery is used for displaying images that may upset some visitors. The gallery is covered by an overlay with adjustable color and opacity which has a warning notice.
The notice has a heading, text and an action button that fades out the overlay on click.
Gallery
The gallery insets irregular sized thumbnails into a justified grid using Flexbox rather than Javascript. The row height can be set and the gap between the thumbnails can be adjusted.
Lazy Loading
The gallery can accommodate up to 480 images so the lazy loading function should be tirned on if more than a few images are inserted.
Shuffle
The grid on this page has the "randomize" option turned on so that the thumbnail image order will be changed every time the page is reloaded.
Captions
The optional captions can use a Google hosted or non web safe font with a web safe fallback if required. The captions can appear on hover when viewed on computers by checking a box.
Lightbox Slider
The slideshow image captions are derived from the thumbnail image's alt text. It has a slide counter and a close tab and the images are responsive up to the maximum width of the image file.
Settings
The layout will depend on the maximum width setting and the row height. Reduce the row height to show more images per roww.
Warning Notice Position
The position of the notice is set by entering its distance from the top in viewport units. The example has the distance set to 10vh.