Responsive Gallery Lightbox In Pure JavaScript – Flatbox

Flatbox is a zero dependency JavaScript library used to organize and display all the images of a specific container in a responsive lightbox gallery. Keyboard navigation is supported as well.

How to use it:

Add references to the Flatbox’s JavaScript and CSS files.

<link rel="stylesheet" href="flatbox.css">
<script src="flatbox.js"></script>

Create a new FlatBox object and specify the target container.

var FlatBox = new FlatBox('.container');

Adjust the default animation speed when navigating between images.

var FlatBox = new FlatBox('.container', {
    changeSlideSpeed: 200
});