EverWeb Widgets

Expanding Image Gallery

Show More/Less Image Gallery

The gallery has a CSS Grid layout and can accommodate up to 480 thumbnails anf their full size counterparts. The grid spacing and all around padding can be adjusted and the number of items per row set for each device type.
The optional captions can be shown on hover on computers. The lightbox icons are optional and can also be displayed on hover.
More/Less
The show more function requires the total number of images to be entered and the number of images to show per click. The buttons inherit the font family set for the captions can be styled for font size, color, hover color, background color and border radius.
Using a "more" function along with the lazy loading option means that a large number of images can be inserted on a page without the page download time being effected too much.
Thumbnail Images
The thumbnail images need to have the same aspect ratio and can be reduced to about 360px wide before importing into EverWeb. Follow the link below to find out how to batch resize image quickly using Preview.app.
Lightbox Slider
The slideshow image captions are derived from the thumbnail image's alt text. It has a slide counter and a close tab and the images are responsive up to the maximum width of the image file.

Show Less
Show More