Gallery Grid With Captions

This responsive thumbnail grid has optional thumbnail captions which can be visible or only viewed on hover or tap as in this example.
The widget uses the text entered into the thumbnail alt attribute to generate the large image captions. It is essential to enter descriptive captions - even if the captions have been turned off - so that the search engines can index the images.
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 widget has an h1 heading and a paragraph for descriptive text inside the gallery container. A slideshow without a text description may as well not be there as far as the search engine spiders are concerned!
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.
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
This example uses the optional footer to form a fully responsive page. If viewing this on a computer, reduce the browser width to see this in action.
The footer has an option to automatically update the © notice year and a built in, smooth scroll to the top chevron which inherits the same font color as the footer text.