EverWeb Widgets

ThemeKit Masonry Gallery

Masonry Gallery

The masonry grid layout is often called a "Pinterest" style grid since most surfers don't know masonry from a mason! It inserts images with different aspect ratios in rows rather than columns. Unlike a justified grid the columns are of equal width and the rows do not have a uniform height.
Grid
The grid can have up to 128 images - each with an overlay caption and a links optional. The captions and links can show on hover when viewed on computers.
The grid has a maximum width settings and the humber of items per row can be set for each device type. There are controls to adjust the grid gap and padding.
Images
The images should be reduced to a reasonable size before importing into EverWeb. The images used in the demo are landscape, square and portarit - 400 x 300px, 360 x 360px and 360 x 450px respectively.
Captions
The optional <figcaption> element is absolutely positioned over the bottom of the thumbnail and the optional lightbox icon is at the top right.
The captions and icons can show on hover when viewed on computers.
Lightbox Slider
The slide captions inherit the font set for the article text but have their own control for size and coloe. The color selected appears in the slide counter, directional arrows and the close tab.
The caption can either overlay the top or bottom of the image or appear outside the image at the bottom.
There are controls for setting the caption delay, transition - fade or slide - transition time and checkboxes for show/hide counter and overlay and for disable right click and preload previous/next images.
The width and height ratios can be adjjusted for odd shaped images and there is a checkbox to scale the images to these ratios.