[Redwood] A Custom Modal With a Lightbox Slideshow In jQuery

Redwood Lightbox Slideshow project creates a lightbox with a slideshow inside that walks through the features of the new Redwood site. To install development modules and get things going, the following commands will be helpful.

It uses a jquery-cookies plugin to remember the user’s choice so that the simplified slideshow doesn’t run the next time the user visits the page or refreshes when browsing all the content.

How to make use of it:

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

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

2. Add your content to the simplified slideshow and make it hidden until the plugin is configured.

<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 manually switch the simplified slide show.

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

Mobile-friendly Lightbox Slideshow In jQuery, Redwood Lightbox Slideshow Plugin/Github, image slider with lightbox popup, jquery slider with image lightbox popup


See Demo And Download

Official Website(giraphcreative): Click Here

This superior jQuery/javascript plugin is developed by giraphcreative. For extra Advanced Usage, please go to the official website.

Share