Minimal Any Content Lightbox In Pure JS – microlightbox

microlightbox is a minimal JavaScript lightbox plugin for showing any HTML content in a responsive popup with a configurable overlay.

How to use it:

Load the stylesheet ‘microlightbox.css’ and JavaScript ‘microlightbox.js’ when needed.

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

Create an image link to toggle an image lightbox.

<a id="example" href="1.jpg">Click Me</a>

microlightbox(document.getElementById("example"), {
  title:"Lightbox Title"
});

Or directly show the image lightbox without any toggle element.

microlightbox("1.jpg", {
  type:"image"
});

Create a link to toggle a lightbox that loads content from an inline element.

<a id="inline" href="#html">Click Me</a>

<div id="html" style="display:none">
  Any HTML Content Here
</div>

microlightbox(document.getElementById("inline"),{
  // OPTIONS HERE
});

All default options to customize the lightbox popup.

{
  // 'auto', 'image', 'html' or 'inline'
  type: 'auto',
  // lightbox title
  title: '',
  // position of title
  titlePosition: 'auto',
  // in pixels
  padding: 10,
  margin: 20,
  minWidth: 100,
  minHeight: 100,
  maxWidth: 0,
  maxHeight: 0,
  // background color
  overlayColor: 'rgba(0,0,0,0.7)',
  // only for type=='image'
  imgWidth: 0,
  imgHeight: 0
  
}

Changelog:

10/01/2018

• small changes

07/08/2018

• CSS update