Combo
The ThemeKit Combo Tabs & Filter Gallery combine to create a filter grid with a lightbox gallery and slideshow. Two widgets are used due to the huge number of controls required to customise just about anything.
ThemeKit Combo
Combo Tabs & Filter Gallery
Show AlliMaciPadiPhoneMacBook
Filter Tabs
The tab 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.
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.
Tabs
The tabs can yse a Google hosted font with a web safe fallback and have controlsl for font size, coloe, tab background color and opacity, padding, hover background and current tab background color.
Gallery
The ThemeKit Combo Filter Gallery creates a uniform image grid by using the same grid layout method as the tabs widget. The thumbnail images have controls for minimum width and row height and for adding a border and/or a box shadow.
The grid and the wrapper has all the same controls as the tab widget so that the item spacing, background colors and padding can be made the same for both items.
The thumbnails have the option to have a caption and an icon. These can show on hover on computers.
Grid Animation
The thumbnails can animate in using the ThemeKit custom animations with a choice of fifteen animation types.
Lightbox
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 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.
Text Module
Text