ThemeKit Responsive

Image Gallery

Layout

Auto Grid

A grid layout using the min-max function and the auto-fill keyword to create a responsive grid without using media queries.
Each item can have an image with alt text, heading, styled span and a description.

Grid Gap

Spacing

Items in the grid can be spaced out evenly by giving a value to the grid-gap property.

Images

The grid images and the lightbox slideshow images can have different aspect ratios.
The grid images should have a file size of around 20KB.
The lightbox images don't need to be any wider than about 1200px with a file size of much less than 100KB.

Styles

The thumbnail images can have a border if required and the article can have a border and/or a bottom box shadow.
The wrapper background can be a solid color or a two color gradient.

Icons

The icons appear at the top right and rotate on hover to show that action is required.

Lightbox Slideshow

The image captions share the same font as the grid text but can be edited for size, color and position.
Captions have a choice of three positions and the caption color is carried over to the slide counter and navigation icons.

Image Gallery

The thumbnail grid is very versatile in that it can display images of different aspect ratio and show just the heading as a caption or show a styled span and a text descritpion with keywords for the search engines.
Images
The images in the above grid were cropped to about 360px wide and optimised before importing into EverWeb. The slideshow images have a max width of 1000px and height of 800px.
Lazy Loading
Both the grid and the slider images can be lazy loaded. The lazy load function for the grid images should be turned on last prior to publishing as it may cause some or all of the images to disappear from view on the EverWeb design canvas.

Gallery Slideshow

Captions
The caption inherits the font used for the gallery grid and can be non web safe or Google hosted with a web safe fallback font.
The captions have controls for font size and color.
The font color is also used for the slide counter, directional arrows and the "close" tab.
The lightbox is closed using the "close" tab or clicking/tapping anywhere outside of the image.
The caption position can be overlay at the top or bottom of the image or outside at the image at the bottom.
The caption animates in to make it more noticeable and there is a control for setting the delay in milliseconds.
Options
The transition can be slide or fade and the transition time is set in milliseconds.
A checkbox to show/hide the slide counter.
The lightbox overlay can be hidden if required.
There is an option to disable right click to help prevent visitors from downloading the slide imagse.
The slide images are lazy loaded by default.
There is an option to preload the previous and next image so that there is little or no delay as the slideshow is navigated.

Images

Image Aspect Ratio
Images with extreme aspect ratios can be fitted in using the controls for height and width ratio.
When the ratios are adjusted there is a checkbox to scale the image to the ratio.
Image Navigation
Slides are navigated using the directional arrows or grab and drag on computers.
Slides can be navigated by swiping on mobile touch devices.
The directional arrows can be remove on mobile devices by checking a box and setting the required breakpoint.
The slideshow is responsive up to the maximum width of the image file.
Thumbnail grid images can be lazy loaded for much better performance in the browsers - particularly on mobile devices.