EverWeb Widgets

Variable Gallery

ThemeKit Variable Gallery

The gallery has a CSS grid layout and shows the first thumbnail image at four times the size of the others as a feature.
When the variable option is turned on the images will be shuffled so that feature image and thumbnail order will change on reload. This gives returning viistors a fresh layout to look at.
As with the other galleries the lazy loading feature should be turned on last prior to publishing.

ThemeKit Launch Pad Gallery

Launch Pad

This gallery is very different from most in that two or more can be inserted on a page without taking up much space and the lightbox slider has an overlay with adjustable overlay color and opacity.
Stacking one above the other would create a compact gallery navigation.
Launch Pad
The bar is full width and the tab is centered with a maximum width. The tab has a text field and an "open" icon. The icon is an SVG and has the option for a hover color.
Lightbox Slider
The overlay uses a custom jQuery plugin to open and close it and it has controlsfor the overlay color and its opacity.
The slideshow is centered with a maximum width setting. It has captions and the option to configure the images as links.
The slide caption, close icon and the previous/next tabs share the same color.
The slideshow stage has a border option to add definition and a bottom box shadow to "lift" it off the canvas.
Navigation is by directional arrows and swipe on touch devices. The transiton can be fade or slide and the transition time is set in milliseconds.
Images
With this slider all the images need to have the same aspect ratio. The images should be sized to the maximum width setting before importing into EverWeb.
Lazy Loading
The slideshow image lazy load function is preset and also preloads the previous and next images for a better user experience.

Launch Pad Gallery [1]

Captions

Launch Pad Gallery [2]

Adjustable Overlay

Launch Pad Gallery [3]

Optional Image Links

Launch Pad Gallery [4]

Slide or Fade Transition

Gallery Navigation Tabs

Once a visitor has navigated to a gallery there needs to be a way to get back to the main gallery menu. In this example it links back to the page with the widget demo links.
It's also helful if there are links to the previous and next galleries if the visitor wants to look at the all.
The container has a three column grid layout and the links have an SVG icon and text when viewed on screen widths above the break point.
The links can be separated by adding a grid gap and there is a maximum width setting to adjust the link bar in relation to the amount of text.
Mobile Styles
Below the break point the text disappears, the links can have a border radius and they can be fixed at the bottom for the convenience of those using mobile touch devices.
There is a z-index control to bring the navigation to the front of other items if required.