Filter Gallery

The PhotoKit Filter Gallery widget is created using the CSS Grid Module has a lot of options. It's worth taking time to explore all these features.
The gallery will take images with different aspect ratios and automatically organise them into an orderly thumbnail grid.
The thumbnails can be lazy loading and have optional captions which can display on hover when viewed on a computer.
There are no media queries required. The number of thumbnail images per row at any browser/device screen width is determined by their minimum width setting and the height by the value set for Row Height.
Filters
The gallery can have from two to six filters. The filter number for each image is set in the widget settings and chosen from a dropdown.
The filter tabs have a minimum width setting and can be aligned left or made to fill the full width of the grid.
The active tab can have a contrasting color. As can be seen from the example, the tab, thumbnail caption and slide caption can use a Google hosted font with a web safe fallback.
Grid
The grid is centered with a maximum width setting. The spacing betweeb the grid items is set using the grid gap selector. There are controls for the grid top/bottom and left/right padding and for the background color and its opacity.
Lightbox Slideshow
All the slideshow option can be seen by launchinging it. The captions inherit the font used for the tabs and thumbnail captions but have their own control for setting the font size and color.
The lightbox overlay color and opacity can also be adjusted.
Wrapper
The wrapper has controls for adjusting the background color and its opacity and for horizontal and vertical spacing.
Animation
The last controls are for setting the thumbnail animation type and time in seconds. The animations use a custom stylesheet and the optios are …
In | Right|Up | Left | Down | Scale | Bounce | Rotate | Rotate Reverse | Spin | Spin Reverse | Swing Left | Swing Right | Swing Down | Swing Up