Touch-enabled Image/Iframe/Gallery Lightbox - jQuery NSB Box

Lightbox plugins are incredibly useful for designers and developers, as they offer a slick way to add photo galleries, image slideshows, videos, iframes, or custom content to any website. 

The NSB Box jQuery plugin makes it easier to create a flexible, responsive, and mobile-friendly lightbox that supports single image, image galleries, and even iframes. It is fairly easy to integrate into any webpage, blog, or web application.

How to use it:

1. Load jQuery library and the NSB Box plugin's files in the HTML.

<link href="/path/to/NSB_Box.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/NSB_Box.js"></script>

2. Apply the lightbox to a single image.

<a class="nsbbox" title="Caption" href="1.jpg">
  <img src="1.jpg" alt="Image Alt" title="Caption" >
</a>

3. Apply the lightbox to an iframe element, which means that you can embed any media to the lightbox.

<a class="nsbbox" title="iFrame Lightbox" href="iframe.html">
  Iframe Lightbox
</a>

4. Create a gallery lightbox where you can navigate between images by clicking next/prev buttons (desktop) or via swipe left/right events (mobile).

<a class="nsbbox" title="Caption" href="1.jpg">
  <img src="1.jpg" alt="Image Alt" title="Caption" />
</a>
<a class="nsbbox" title="Caption" href="2.jpg">
  <img src="2.jpg" alt="Image Alt" title="Caption" />
</a>
<a class="nsbbox" title="Caption" href="3.jpg">
  <img src="3.jpg" alt="Image Alt" title="Caption" />
</a>
...

5. Set the height & width of the lightbox.

<a class="nsbbox" title="iFrame Lightbox" href="iframe.html" data-width="500" data-height="400">
  Iframe Lightbox
</a>

6. Prevent the iframe from scrolling when the content overflows.

<a class="nsbbox" title="iFrame Lightbox" href="iframe.html" data-width="500" data-height="400" data-scrolling="no">
  Iframe Lightbox
</a>

Changelog:

2023-10-07

• Update NSB_Box.js

---

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