Display Your Images/Iframes In A Slider Popup - simpleLightbox

A jQuery based simple gallery lightbox plugin that displays your images and/or iframe views in a responsive modal popup and allows the user to switch between these images just like a slider.

More features:

• Image counter.
• Touch-friendly.
• Opens images links in a new window/tab.
• Keyboard interactions: BACKSPACE, SPACE, ESC, ENTER, PAGE DOWN, PAGE UP.
• Also allows you to switch between with mouse wheel.
• Supports Youtube videos and Google maps.
• Content loading indicator.

How to use it:

1. Import both jQuery JavaScript library and the simpleLightbox plugin into the document.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="dist/jquery-simple-lightbox.js"></script>

2. Add the rel="lightbox" attribute to the images as follows:

<div id="example">
  <a href="large-1.jpg" rel="lightbox" title="image 1">
    <img src="small-1.jpg">
  </a>
  <a href="large-2.jpg" rel="lightbox" title="image 2">
    <img src="small-2.jpg">
  </a>
  <a href="large-3.jpg" rel="lightbox" title="image 3">
    <img src="small-3.jpg">
  </a>
  <a href="large-4.jpg" rel="lightbox" title="image 4">
    <img src="small-4.jpg">
  </a>
  <a href="large-5.jpg" rel="lightbox" title="image 5">
    <img src="small-5.jpg">
  </a>
</div>

3. It also supports iframe links, Youtube Videos and Google Maps.

<a href="https://www.youtube.com/embed/EngW7tLk6R8" title="YouTube" rel="lightbox">YouTube</a>

<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d207446.24922900886!2d139.600439926488!3d35.66844106459942!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b857628235d%3A0xcdd8aef709a2b520!2sTokyo!5e0!3m2!1sen!2sjp!4v1562402670273!5m2!1sen!2sjp" title="Tokyo, Japan" rel="lightbox">Google Maps</a>

<a href="test/assets/iframe1.html" title="iframe1" rel="lightbox">iFrame Content</a>

4. Call the function on the top container to initialize the plugin. That's it.

$(function(){
  $('#example').simpleLightbox();
});

5. The default selector.

$('#example').simpleLightbox({
  links: 'a[rel="lightbox"]'
});

6. Set the image extentions allowed.

$('#example').simpleLightbox({
  imageExt: /^(jpg|jpeg|png|gif|bmp|webp)$/
});

7. Set the paranet container

$('#example').simpleLightbox({
  owner: 'body'
});

Changelog:

v0.2.0 (2019-10-21)

• Support touch event.
• Fix css class name.
• Bundle css with js.

---

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