Minimal Any Content Lightbox In Pure JS – microlightbox

Category: Javascript , Modal & Popup | October 1, 2018
Author: KyberPrizrak
Views Total: 529 views
Official Page: Go to website
Last Update: October 1, 2018
License: MIT

Preview:

Minimal Any Content Lightbox In Pure JS – microlightbox

Description:

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

You Might Be Interested In:


Leave a Reply