Responsive Image LG Gallery
This responsive thumbnail grid launches a fully featured lightbox slideshow with several options and a large choice of transitions.
The thumbnail images can have overlay captions if required and these can be set to only display on hover on computers and tap on touch devices such as iPad and iPhone.
The thumbnail grid changes the number of images per row depending on the device used to view it. This is done using media queries by setting a break point and specifying the image percentage width for each device type. If viewing this on a computer, reduce the browser width to see it in action.
The lightbox slideshow is navigated by arrows or grab and drag on computers and swipe on touch devices. There are lots of transitions to choose from including 3D effects and the images have captions which can be extended to two or more lines by using the HTML5 line break <br>.
The images can be set to autoplay with an adjustable slide and transition time and an optional progress bar. There is also a play/pause button to autoplay from manual mode.
The slide show has a zoom in/out function and can also be played fullscreen.
The responsive slideshow images have a percentage width setting to control images with a low or reverse aspect ratio.
Turning on the "Smart Loading" feature allows the next and previous images to preload thus saving visitors having to watch the loading icon while large image files load.
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.
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.
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.
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.