Author: | clsedlacek |
---|---|
Views Total: | 734 views |
Official Page: | Go to website |
Last Update: | May 4, 2017 |
License: | MIT |
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" >