Simple Responsive Image Lightbox – SimplBox.js

Preview:

Description:

SimplBox.js is a standalone JS library for displaying your images in a fully responsive and touch-friendly lightbox, featuring image loader, fullscreen overlay and image caption.

Basic Usage:

Add a link with data-simplbox attribute to your thumbnail. Use <a> tag’s href attribute to define the large version of the image.

<a href="full.jpg" data-simplbox="demo">
    <img src="thumbnail.jpg" alt="My image description that will be used"/>
</a>

Include the simplbox.js script in the document.

<script src="js/simplbox.min.js"></script>

Initialize the  lightbox with a little Javascript.

var A = new SimplBox(document.querySelectorAll("[data-simplbox='demo']"), {
  OPTIONS HERE
});
A.init();

The required CSS to remove 300ms delay on touch devices.

html {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

The sample CSS to style the lightbox.

#simplbox {
  z-index: 10000;
  ms-touch-action: none;
  touch-action: none;
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
}

Available options.

• imageElementId: "simplbox": Name that will be assigned to created image element as id.
• fadeInDistance: 100: The distance that will be used for fading in when navigating between images via keyboard or touch screen.
• animationSpeed: 350: The animation speed that will be used when image fades in.
• imageSize: 0.8: This is used when image is bigger than user’s viewport that is image is bigger than device’s screen and therefore it will be scaled down by this multipler.
• quitOnImageClick: true: Boolean variable whether to quit on image click or not.
• quitOnDocumentClick: false: Boolean variable whether to quit on document click or not.
• enableKeyboard: true: Boolean variable whether to enable keyboard support for navigating images or not.
• onImageLoadStart: function () {}: Function that will be called when image caching and appearing process starts.
• onImageLoadEnd: function () {}: Function that will be called when image has been cached and appears on the device’s screen.
• onStart: function () {}: Function that will be called when lightbox appears on device’s screen.
• onEnd: function () {}: Function that will be called when lightbox disappears from device’s screen.