ThemeKit Filter Gallery Widgets
The filter gallery uses two widgets - one creates the category tabs and the other the image grid and gallery. Two widgets are used due to the huge number of controls required to customise just about anything.
EverWeb Widgets
ThemeKit Filter Gallery
Show AlliMaciPadiPhoneMacBook
Tab Bar
The bar widget is centered with a maximum width setting and has a field for entering the main tab text. More tabs are added using the EverWeb widget API assets list and each tab is given the name of the group of thumbnails that will display when it is clicked or tapped.
The bar has a grid layout using minmax and the "auto-fit" keyword. The min width setting is adjustable.
The tabs have a background hover animation and the current tab can be displayed in a different color.
Image Gallery
The lightbox image captions inherit the font selected for the thumbnail captions but have their own control for font size.
There are controls for setting the lightbox overlay background color and its opacity and for the color of the captions nad other controls.
There is a control for setting the slide transition from a choice of six types and fr the transition time.
Control Bar
The control bar at the top of the lightbox window has checkboxes to turn on the various functions. These are for image download, share to social media, full screen view and to show/hide the thumbnails as a grid at the right hand side of the lightbox window.
Lightbox Slideshow
The lightbox images have the option to play a slideshow using a play/pause button or by selecting autoplay and setting the slide display time.
The slideshow progress bar which appears at the top of the lightbox has a control to set its color.
Image Grid
The grid layout uses the min-max function and the auto fit keyword to adjust the number of tabs per row with varying browser and device width and to fill the width automatically without using media queries.
There are controls for setting the tab minimum with for all devices and for setting a different value for phones if required.
The grid has controls for background color and opacity and for grid gap and padding.
The wrapper also has controls for background color and opacity and for spacing.
Grid Animation
The thumbnails can animate in using the ThemeKit custom animations with a choice of fifteen animation types.