Basic Image Lightbox In Pure JavaScript – maxbox

Preview:

Description:

maxbox is a small, standalone JS library that displays large images in a responsive, modal-style popup window. You’re allowed to customize the overlay background and button styles via HTML5 data attributes.

How to use it:

Import the maxbox’s JavaScript and CSS files into the document.

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

To use this image lightbox, just give any element a ‘data-maxbox-src’ attribute with the full image’s src:

<img src="small.jpg" 
     data-maxbox-src="full.jpg"
>

Customize the background color and/or image:

<img src="small.jpg" 
     data-maxbox-src="full.jpg"
     data-maxbox-bg="#000"
>
<img src="small.jpg" 
     data-maxbox-src="full.jpg"
     data-maxbox-bg="url('path/to/bg.png')"
>

Customize the font & color of the close button:

<img src="small.jpg" 
     data-maxbox-src="full.jpg"
     data-maxbox-font="font-family: 'Roboto'"
     data-maxbox-color="red"
>