Responsive Expanding Gallery Lightbox Slider

The image grid is based on the CSS Grid Layout Module so the grid row gap, column gap and padding can all be adjusted individually. The padding can be set to zero on mobile phones to give a full width thumbnail.
The number of items per row can be set for each device type - computer, tablet landscape, tablet portrait and mobile phone.
The grid has both lazy loading images and "Show More" to control the number of images loaded at page load and the number of images to reveal on click.
Images
The images should be of the same size and aspect ratio and cropped to the required size before importing into EverWeb. They can all be selected in the Finder and dragged together and dropped onto the Assets List in the widget settings to quickly create the grid.
The images in this example were cropped to 400px wide.
Lazy Loading
The gallery grid can accomodate up to 100 images. Anything more than about 12 images is getting too much for mobile phone users. This widget incorporates a lazy loading function so that only the first half dozen or so thumbnails are downloaded on page loading when viewed on a phone and then only if the grid is at the top of the page. The rest of the images are downloaded just before the visitor scrolls them into viewed.
Show More
The showmore option makes the grid even more efficient since only the visible thumbnail images are downloaded from the server when the page loads in the browser. More images will download on demand when the visitor clicks or taps the "Load More" tab.
The number of images to load per click can be set to different values for computer and mobile. The tab has options for a hover background and the button text can be changed to allow for different languages.
Captions
The captions overlay the bottom of the image and can use a web safe font or a non websafe or Google hosted font with a web safe fallback. There are controls for font size, color and the background color and its opacity.
The captions can be set to display on hover or on page load when viewed on a computer and will be displayed on page load when viewed on touch devices like the iPad and iPhone.
Animation
There is an option for having a scale animation on hover on the thumbnail images. There are controls for setting the scale amount and the animation time of the image scale and caption fade in animations.
The large image caption also has a control for setting the caption animation time setting in milliseconds.
Links
The images can be configured as links to open internal or external pages and havea new window option. Follow the link below to find out how to figure out the file paths for relative and absolute links.