Image Grid

Showing a large number of images in a grid means that the browser has to download all the images at page load and the visitor can get overwhelmed. Showing a images at page load and having a "show more" function allows the visitor to focus on fewer images and the remaining images can be lazy loaded on click.
Grid
The widget uses a CSS Grid Module Layout, The number of items per row can be set for each device type and the spacing between the items and the all around padding can be adjusted.
Images
The images in the above grid are set to two per row on computers and the maximum width is set to 1200px so the images were reduced to 600px wide before importing into EverWeb.
Captions
The optional captions overlay the bottom of the image and have the option to show on hover when viewed on computers. A non web safe or Google hosted font can be used with a web safe fallback. The caption background color control has an opacity slider.
Lazy Loading
The lazy load function uses a small script which doesn't require jQuery and prevents more images from being downloaded until the "More" button is clicked.
Show More
The show more function uses a small custom script. The number of images to show on page load and the number of images to load when the button is clicked can be set in the widget settings panel.
The animation time can be adjusted and is set in milliseconds.
NOTE: The total number of images must be entered for the more/less function to work properly.
Links
The optional links can open internal or external pages and have a new window option.
Follow the link below to learn about using relative and absolute file paths to create internal and external links.