Responsive Expanding Gallery Lightbox Slider

The gallery 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 gallery has both lazy loading and "Show More" to control the number of images loaded at page load and the number of images to reveal on click.
Image File
With a lightbox slideshow, the large images don't download with the rest of the page content. They only load when their corresponding thumbnail image is clicked. Even so, their width should be kept to a reasonable value - 1200px is wide enough for most purposes.
The thumbnail images in this example have been 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
Both the thumbnail and the large image captions are optional although the large image captions should be entered even if they are not displayed. These captions are derived from the alt text attribute of the thumbnail images so they should contain keywords to describe the image for the search engines.
The thumbnail 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.
Lightbox Slideshow
The slideshow images are responsive up to the width of the actual image file and there are controls for setting the image width and height ratios if required for odd sized images.
Navigation is by previous and next arrows and by swiping on touch devices. There is an option to show a slide counter which displays the slide number and the total number of slides.
If the number of slides per row is set to 1 and the padding set to zero for mobile phones, there is no need for the visitor to even open the slideshow since they can swipe vertically through the full width thumbnails.