Lightbox for Carousel Images

What does this code do?

This code snippet will allow you to add a Lightbox to a Carousel of images. You have two options. You can use a Slideshow Reel Gallery Section or a Summary Block.

Video Tutorial

Option 1: Summary Block Lightbox

Step 1: Add a Summary Block

Create a collection page of the items you wish to display such as a Blog Page. Then add a Summary Block to the page you would like the carousel on. Take note that adding the Lightbox will remove the clickthrough link for this collection because you cannot have two click through events. Therefore, only use this effect if you do not want them to be able to get to the blog post.

Step 2: Copy and paste this code into the Header Code Injection

<!-- Lightbox for Summary Block -->
<div id="rgd-lightbox">
  <div id="rgd-lightbox-content-wrapper">
    <span id="lightbox-close" onclick="closeLightbox(this)">×</span>
    <div id="rgd-lightbox-content">
      <img class="summary-thumbnail-image loaded" src="">
    </div>
  </div>
</div>

Step 3: Copy and paste this code into the Footer Code Injection

<!-- Lightbox for Summary Block -->
<script>
(function () {
  // remove summary link
  var summaryItemLink = document.querySelectorAll(".summary-item a");
  for (i = 0; i < summaryItemLink.length; i++) {
    summaryItemLink[i].removeAttribute("href");
  }

  // add lightbox onclick/*
  var summaryItem = document.querySelectorAll(".summary-item");
  for (i = 0; i < summaryItem.length; i++) {
    summaryItem[i].onclick = function () {
      document.getElementById("rgd-lightbox-content-wrapper").style.display =
        "block";
      document.body.classList.add("stop-scrolling");
      var image = this.querySelector("img").getAttribute("src");
      var lightboxContent = document.querySelector("#rgd-lightbox-content img");
      lightboxContent.setAttribute("src", image);
    };
  }

  // closes if they click on x
  function closeLightbox(f) {
    f.target.closest("#rgd-lightbox-content-wrapper").style.display = "none";
    document.body.classList.remove("stop-scrolling");
  }
  //closes if they click outside the lightbox content
  document.addEventListener("click", function (event) {
    if (event.target.closest("#rgd-lightbox-content")) return;
    event.target.closest("#rgd-lightbox-content-wrapper").style.display =
      "none";
    document.body.classList.remove("stop-scrolling");
  });
})();
</script>

Step 4: Copy and paste this code into the Custom CSS

/* Lightbox */
.stop-scrolling { 
    height: 100%; 
    overflow: hidden; 
} 
#rgd-lightbox-content-wrapper {
  display:none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8); //page overlay colour when lightbox is open
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
/* Popup container */
#rgd-lightbox-content {
  display: flex;
  width: 80vw; // width of lightbox content 
  height: 80vh; // height of lightbox content
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -40vh 0 0 -40vw; // margin to center the content, these numbers must be half of the height and width
  overflow: auto;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
#rgd-lightbox-content img{
  height: 100%;
  width: auto;
  margin-right: auto;
  margin-left: auto;
}
// Fade in the Lightbox
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// Lightbox Close Button
#lightbox-close{
  color: white; // color of x
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px; // size of x
}

#lightbox-close:hover,
#lightbox-close:focus {
  color: #999; // color of x on hover 
  text-decoration: none;
  cursor: pointer;
}

Option 2: Slideshow Reel Lightbox

Step 1: Add a Slideshow Reel Section

Add a Slideshow Reel Section by adding any gallery section to your page. Then click to edit the section and choose Slideshow:Reel. Choose the settings you would like and then add your images.

Step 2: Copy and paste this code into the Header Code Injection

<!-- Lightbox for Slideshow Reel -->
<div id="rgd-lightbox">
  <div id="rgd-lightbox-content-wrapper">
    <span id="lightbox-close" onclick="closeLightbox(this)">×</span>
    <div id="rgd-lightbox-content">
      <img class="summary-thumbnail-image loaded" src="">
    </div>
  </div>
</div>

Step 3: Copy and paste this code into the Footer Code Injection

<!-- Lightbox for Slideshow Reel -->
<script>
(function () {
  // add lightbox onclick
  var galleryItem = document.querySelectorAll(".gallery-reel-list");
  for (i = 0; i < galleryItem.length; i++) {
    galleryItem[i].onclick = function () {
      document.getElementById("rgd-lightbox-content-wrapper").style.display =
        "block";
      document.body.classList.add("stop-scrolling");
      var image = this.querySelector(".gallery-reel-item[data-active='true'] img").getAttribute("src");
      var lightboxContent = document.querySelector("#rgd-lightbox-content img");
      lightboxContent.setAttribute("src", image);
    };
  }

  // closes if they click on x
  function closeLightbox(f) {
    f.target.closest("#rgd-lightbox-content-wrapper").style.display = "none";
    document.body.classList.remove("stop-scrolling");
  }
  //closes if they click outside the lightbox content
  document.addEventListener("click", function (event) {
    if (event.target.closest("#rgd-lightbox-content")) return;
    event.target.closest("#rgd-lightbox-content-wrapper").style.display =
      "none";
    document.body.classList.remove("stop-scrolling");
  });
})();
</script>

Step 4: Copy and paste this code into the Custom CSS

/* Lightbox */
.stop-scrolling { 
    height: 100%; 
    overflow: hidden; 
} 
.gallery-reel-list {
  cursor: pointer;
}
#rgd-lightbox-content-wrapper {
  display:none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8); //page overlay colour when lightbox is open
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
/* Popup container */
#rgd-lightbox-content {
  display: flex;
  width: 80vw; // width of lightbox content 
  height: 80vh; // height of lightbox content
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -40vh 0 0 -40vw; // margin to center the content, these numbers must be half of the height and width
  overflow: auto;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
#rgd-lightbox-content img{
  height: 100%;
  width: auto;
  margin-right: auto;
  margin-left: auto;
}
// Fade in the Lightbox
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// Lightbox Close Button
#lightbox-close{
  color: white; // color of x
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px; // size of x
}

#lightbox-close:hover,
#lightbox-close:focus {
  color: #999; // color of x on hover 
  text-decoration: none;
  cursor: pointer;
}