Lightbox Gallery Grid Captions

A responsive image grid gallery with thumbnail captions in the figcaption element and large image captions derived from the alt text attribute. The large image captions can be hidden globally if required and can also have a delay time.
The lightbox style slideshow is navigated using back/forward arrows or grab and drag on computers. On tablets and mobile phones, the arrows disappear since swiping or tapping can be used. Note the delayed action of the slideshow image captions.
The thumbnails caption can be extended to two lines by checking a box and using the HTML line break <br> to create returns.
The number of thumbnails images per row can be varied depending on screen width.
The large images are set to lazy loading by default to reduce the page download time. The previous and next images are preloaded so that they are available quickly.
There are controls for setting the large image width and height ratio for cases where random size image are used.
Grid
The example grid displays four images per row when viewed on a computer and a tablet in landscape mode, three when viewed on a tablet device in portrait mode and two on a mobile phone.
Reduce the browser width to see the responsive action or view the page in the browser's responsive mode or the iOS Simulator. The number of images per row for each device type can be adjusted in the widget settings by specifying the number of thumbs per row for each one.
The image horizontal and vertical spacing can each be adjusted.
Thumbnail Images
All the thumbnail images need to have the same aspect ratio and should be cropped to the maximum size required. An image width of around 300px is a good compromise between quality and download speed.
Text Content
Since the grid is contained in an HTML5 section element, it can have an h1 heading and descriptive text which the search engines will see as being related to the images.
Optional Footer
The widget has an optional footer so that it can create a fully responsive page when combined with a suitable header/navigation widget.
The footer has an optional smooth scrolling "Back To The Top" chevron which inherits the footer text color and has the option to automatically update the copyright year..