Vanilla JavaScript Lightbox With Easy Per-image Configuration | maxbox

simple-vanilla-js-lightbox

maxbox is a small vanilla JavaScript lightbox with an easy per-image configuration that displays large images in a responsive popup.

responsive lightbox image gallery, simple lightbox jquery, simple lightbox javascript

How to make use of it:

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

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

2. To use the lightbox for the image, just give any element the ‘data-maxbox-src’ attribute with the src of the full image:

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

3. Customize 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')"
>

4. Customize the font and color of the closing button:

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

Basic Image Lightbox, maxbox Plugin/Github


See Demo And Download

Official Website(clsedlacek): Click Here

This superior jQuery/javascript plugin is developed by clsedlacek. For extra advanced usage, please go to the official website.