Photo Gallery

This versatile image gallery can display thumbnail images with varying aspect ratios in a uniform and adjustable grid.
The thumbnail images are inserted in an auto grid which uses the min-max property along with the auto-fit keyword to adjust the thumbnail width and auto row height to ajust the height.
There is an option to use auto row height which will adjusr the height of the row to the height of the tallest thumbnail.
Being a CSS Grid layout the spacing can be adjusted using the grid gap control. The grid also has controls for top/bottom and left/right padding.
Thumbnail Overlay
The overlay has controls for its color and opacity and can show on hover when viewed on computers.
The caption can be augmented by a separator line and a descritption.
Lightbox Slideshow
The slideshow captions inherit the font set for the thumbnails which - in this case - is a Google hosted font with a web safe fallback. There are controls for setting the slide caption font size and animation delay. The captions can overlay the image at the top or bottom or appear outside the image at the bottom.
The color set for the caption is also used by the counter, directional arrows and the close button.
The transition can be fade or slide and there are controls to show/hide the counter, hide the overly, disable right click, preload previous/next images and scale the image to any adjustment made to the height or width ratio to fit odd shaped images.
Lazy Load
The thumbnail image lazy loading function should be turned on last as some or all of the thumbs may disappear form view on the EverWeb design canvas.
The slideshow images are lazy loaded with an option to preload the previous and next images for a better viewing experience.