Minimalist Image Lightbox Popup Plugin - jQuery image-popup.js

File Size: 3.31 KB
Views Total: 8407
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimalist Image Lightbox Popup Plugin - jQuery image-popup.js

image-popup.js is a dead simple & CSS less jQuery image lightbox plugin which could be used to overlays your images on the top of the webpage. Click anywhere on the blank background overlay to close the popup.

How to use it:

1. Add the CSS class img-popup to the existing images.

<img class="img-popup" src="1.jpg">
<img class="img-popup" src="2.jpg">
<img class="img-popup" src="3.jpg">
...

2. Create the html for the background overlay.

<div class="overlay-dark"></div>
<img class="img-overlay">

3. Place jQuery library and the jQuery image-popup.js script right before the closing body tag.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="image-popup.js"></script>

4. Apply your own CSS styles to the background overlay.

.img-overlay {
  position: fixed;
  top: 90px;
  max-height: 80%;
  left: 50%;
  transform: translate(-50%, 0) scale(0, 0);
  z-index: 10;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  transition: all .3s ease;
}

.overlay-dark {
  top: 0;
  position: fixed;
  background-color: #000;
  opacity: .9;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: none;
}

This awesome jQuery plugin is developed by saksham-mittal. For more Advanced Usages, please check the demo page or visit the official website.