Light Gallery

The thumbnail images are arranged using the CSS Grid Layout Module to allow more features with less code.
Auto-Sizing
A really usefull feature of the CSS Grid Layout is "auto-fit" which automatically rearranges the number of columns when the browser/device width is changed without using media queries. This is combined with the "min-max" property which sets the minimum width of the columns and therefore the minimum thumbnail size.
Grid
The grid is created using the CSS Grid Layout module for maximum flexibility and minimum code.
The grid layout allows the item spacing to be adjusted with one control without effecting the other properties.
Grid Items
The grid items also have a "height" property. This allows a bunch of thumbnails with varying aspect ratio to maintain both equal width and height. In this case, the grid images are more or less square but could just as aesily be portrait or landscape by adjusting the value for height.
The grid images have options for a box shadow, captions, captions on hover and scale on hover.
Animation
The widget uses a custom stylesheet to allow the thumbnails to animate in on page load and on group load.
The animation types are …
In, Right, Up, Left, Down, Scale, Bounce, Rotate, Rotate Reverse, Spin, Spin Reverse, Swing Left, Swing Right, Swing Down & Swing Up
Slideshow
The lightbox slideshow has a large number of options including fullscreen, play/pause, autoplay, share, zoom, counter and smart preload.
There is a choice of 30 transition types and the transition time is set in milliseconds.
The color of the controls and caption can be chnaged and the control bar and caption bar have controls for adjusting the background color and its opacity.
Thumbnails
The thumbnails can be shown when the lightbox slider opens. If they are hidden, the visitor can access them using the icon at the bottom right.
Autoplay Progress
When in autoplay mode there is an option to show a progress bar at the top. The progress bar background and its active background colors can be shanged to suit the overlay and controls colors.
Slideshow Captions
The slider image captions inherit the font family set for the grid but have their own controls for font size. They inherit the color set for the slideshow controls.