Minimal Responsive Image Lightbox Plugin - Simple Overlay

Simple Overlay is a jQuery plugin used to present your images in a fullscreen, responsive overlay that supports both single and grouped images. To navigate between image in the 'group' mode, just click on the left/right side of current image and you'll see the magic.

How to use it:

1. Include the CSS file simple-overlay.css in the head, and the JavaScript file simple-overlay.js at the bottom of the webpage.

<link rel="stylesheet" href="simple-overlay.css">
<script src="jquery.min.js"></script>
<script src="simple-overlay.js"></script>

2. Apply the plugin to an image.

<a class="launch-overlay" href="1.jpg>Click me</a>

$( '.launch-overlay' ).simpleOverlay();

3. Present a group of images in the responsive overlay just like a gallery lightbox. Note that the 'data-group' attribute must have a same value.

<a class="launch-overlay" href="1.jpg"
   data-group="gallery-1"></a>
<a class="launch-overlay" href="2.jpg"
   data-group="gallery-1"></a>
<a class="launch-overlay" href="3.jpg"
   data-group="gallery-1"></a>

$( '.launch-overlay' ).simpleOverlay();

Change log:

2016-11-28

• JS clean up

2016-10-29

• fixed <ie11 bug

---

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