Lightbox Image Gallery

1 It makes no sense to have an image gallery with a thumbnail grid to open the large images on a responsive page.
Think of all the extra images required and the amount of scrolling required by phone users.
The gallery above needs just a single lazy loaded image to launch the slideshow and provides a text block for the gallery name and also a description for the visitors and the search engines - win, win!
Badly conceived image galleries and slideshows are the main cause of a poor or unacceptable Google PageSpeed Insights score.

Show More

2 If a thumbnail grid is a must using a show more/less grid will reduce the amount of scrolling for those visitors using small mobile devices
The gallery grid is essentially the same as the image grid shown below with the addition of the lightbox slideshow.
Page Speed

Show More Grid

3 Using a large image grid to display items or as links to product/pages takes up far to much content height when viewed on a small tablet or phone.
Using a show-more/show-less grid solves the problem by keeping the number of images displayed on page load to a reasonable minimum.
Items
The widget has controls for inserting the total number of images and for the number of images to show each time the "Show Mre" button is clicked.
All the images can be seen while editing on the EverWeb design canvas by entering the number to show equal to the total number.

Images
The image must be resized and optimised before importing into EverWeb. The demo images were sized at 360 x 360px and have a file size of less the 20KB.
There is an option to lazy load the images which should be used if there are more than about half a dozen images in the grid.
Image Grid
The number of items per row can be specified for each device type and there are controls for adjusting the column and row gap and the grid padding.
Captions
The caption is below the image so that they can run to two or more lines if required.
Links
When the image link option is selected the icon appears at the top right and can be shown on hover when viewed on computers and laptops.