EverWeb Widgets

Image Shutter Gallery

Lightbox Gallery

The gallery has an auto grid layout for displaying images of varying aspect ratio in a uniform grid by setting min-with and row height.
In this example the min-width is set to 320px and the row height to 230px.
Captions
The thumbnail has a shutter overlay with the caption in the top shutter and the description in the bottom one.
The overlay appears on hover on computers and on load when viewed on mobile touch devices.
The mobile overlay has its own controls for color and opacity and there is an extra control for setting the thumbnail spacing when they are stacked one above the oter when viewed on mobile phones in portrait mode.
Gallery
The gallery has all the usual controls plus the option to change the overlay and caption background color and their opacity.
Lazy Load
The gallery images are lazy load with an option to preload the previous and next images.
The thumbnail images have optional lazy loading. This should be turned on just before publishing since some or all of the thumbnails will disappear when viewed on the EverWeb design canvas.

Quick Links

These image links with captions can be used as a section or directory navigation. The panel slides in from the left or right and the action tab can show a label on hover when viewed on computers.
There is an option to sjow the captions and an image opacity animation on hover.
When the number of image links excedes the viewport height the overflow will scroll.