Mobile-friendly Lightbox Slideshow In jQuery

A fully responsive, mobile-friendly, touch-enabled lightbox slideshow (gallery lightbox) written in jQuery.

It uses js-cookies plugin to remember the user's choice so that the lightbox slideshow will no longer be triggered the next time the user visits or refreshes the page when all the content is browsed.

In addition, the lightbox slideshow uses mattbryson's jQuery touchSwipe plugin to provide basic touch support for mobile users.

How to use it:

1. Load the latest jQuery library and other resources in the document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Bundled JS & CSS -->
<link rel="stylesheet" href="css/main.css" />
<!-- With Cookies -->
<script src="js/main.js"></script>
<!-- Without Cookies -->
<script src="js/main-no-cookie.js"></script>

2. Add your content to the lightbox slideshow and make it hidden until the plugin is initialized.

<div class="ph-slideshow-container" style="display:none;">
  <div class="ph-slideshow">
    <div class="ph-slide visible" id="ph-slide-1">
      <div class="ph-slide-image" style="background-image: url(1.jpg);"></div>
      <div class="ph-slide-content">
        <div class="ph-slide-content-inner">
          <h6>Slide 1</h6>
        </div>
      </div>
      <div class="slide-number">1 of X</div>
    </div>
    <div class="ph-slide" id="ph-slide-2">
      <div class="ph-slide-image" style="background-image: url(2.jpg);"></div>
      <div class="ph-slide-content">
        <div class="ph-slide-content-inner">
          <h6>Slide 2</h6>
        </div>
      </div>
      <div class="slide-number">2 of X</div>
    </div>
    <div class="ph-slide" id="ph-slide-3">
      <div class="ph-slide-image" style="background-image: url(3.jpg);"></div>
      <div class="ph-slide-content">
        <div class="ph-slide-content-inner">
          <h6>Slide 3</h6>
        </div>
      </div>
      <div class="slide-number">3 of X</div>
    </div>

    ... more slides here ...

    <a class="prev">&laquo;</a>
    <a class="next">&raquo;</a>
    <a class="close">X</a>
  </div>
</div>

3. Create a trigger link to toggle the lightbox slideshow manually.

<a href="#" class="newwebsitemodal2021">
  Re-open
</a>

Changelog:

2021-10-19

• Add no-cookie version of the js that will open every time.

2021-10-07

• Only show the popup if 'fuzeurl' isn't present in the URL.

2021-09-30

• Change cookie library to js-cookie.js, enforce a 30 day expiration so it's not a session cookie anymore, and bump cookie names.

2021-09-28

• Add 'go_to_start()' function and run it when they re-open the lightbox via link.

---

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