EverWeb Widgets

Justified Gallery

Slide [1] Slide [2] Slide [3] Slide [5] Slide [5] Slide [6]

Gallery

The ThemeKit Justified Gallery widget use a Flexbox layout to create a grid of images with different aspect ratios. The grid can be centered with a maximum width setting or full with when there are lots of images.
Images
The widget settings panel has controls for setting the minimum image width and the row height for each device - computer, tablet portrait and phone.
The demo has all these values set to 300px and the images were reduced to 400px in height before importing into EverWeb.
Grid
The grid is centered with a maximum width but can be made full width by checking a box. Both the grid and the wrapper have controls for background color and opacity.
The grid has controls for item spacing and top/bottom and left/right adding. The wrapper has a vertical spacing control.
Lazy Loading
The last control turns on the lazy loading option which should be used if more than a few images are inserted in the grid.
Lightbox Slider
The lightbox slideshow displays the images responsively up to the maximum width of the image file. Navigation is by directional arrows or grab and drag on computers and swipe on touch mobile devices. The slideshow captions are derived from the thumbnail image's alt text and there is a slide counter.
The slideshow captions have their own controls for font size and color and can be placed at the top or bottom of the image or outside the image at the bottom.
The navigation arrows, slide counter and close tab inherit the caption color.
There are controls for adjusting the slideshow for odd sized images, hiding the overlay and to prevent downloading of the images using right click.
The slideshow images are lazy loaded by default and there is a checkbox to allow the previous and next images to load to prevent a delay of the image appearing.