Lightbox

lightbox
Written By Dmytro Kyselov

To enable a lightbox for a gallery(Product, Portfolio, Slideshow), add this code to Code Injection or to a page header code injection(to enable a lightbox on a specific page): 

<!-- Enable Lightbox for Gallery -->
<!-- Author: Dmytro Kyselov https://dmytrokyselov.com/ -->
<link href="/s/plugin-lightbox.css" rel="stylesheet">
<script src="/s/plugin-lightbox.js"></script>
<script>function enableLightboxForGallery(t){[].slice.call(document.querySelectorAll(t)).forEach((function(t){var e=t.querySelector("img"),o=t.querySelector(".meta"),i=e.parentNode,n=document.createElement("a"),r="#lightbox_"+e.getAttribute("data-src");n.setAttribute("data-fancybox","product-item-gallery"),n.setAttribute("href",r),i.insertBefore(n,e),n.setAttribute("style","position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; display: block"),setTimeout((function(){n.appendChild(e.cloneNode()),n.addEventListener("click",(function(t){t.stopPropagation()})),e.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation()})),o&&n.setAttribute("data-caption",o.innerHTML),i.querySelector(".sqs-image-zoom-duplicate")&&i.addEventListener("click",(function(){n.click()}));var r=t.querySelector(".thumb-title");r&&r.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation()}))}),1e3)}))}</script>
<script>
document.addEventListener('DOMContentLoaded', function(){
setTimeout(function() {
  ////////////////////////////////////////////////////////////////////////////////////////

  // Enable Lightbox For Product Gallery(to disable it for Product Gallery, remove the line below)
  enableLightboxForGallery('.ProductItem-gallery-slides-item,.pdp-gallery-images .pdp-gallery-slides');

  // Enable Lightbox For Portfolio Gallery(to disable it for Portfolio Gallery, remove the line below)
  enableLightboxForGallery('#thumbList .thumb');

  // Enable Lightbox For Slideshow Gallery(to disable it for Slideshow Gallery, remove the line below)
  enableLightboxForGallery('.sqs-gallery.sqs-gallery-design-stacked .slide');

  ////////////////////////////////////////////////////////////////////////////////////////
  pluginLightbox({'reinitSiteLifecycle70':'false','reinitSiteLifecycle71':'false','reinitCommerceLifecycle':'false'});
}, 1000);
});
</script>
<style>
.pdp-carousel-controls {position: static}
.pdp-carousel-controls .chevron-prev,
.pdp-carousel-controls .chevron-next { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%) }
.c-lightbox__caption {margin-bottom: 10px }
.c-lightbox__caption .meta-title { font-size: 1.2rem }
.c-lightbox__caption .meta-description p { margin-top: 0 }
</style>
<!-- end Enable Lightbox For Product Gallery -->

Automatically Open Lightbox
After Form Submission

To automatically open a lightbox after a form submission, add this code to Code Injection under the plugin code 

<!-- Open Lightbox After Form Submission -->
<script src="https://cdn.jsdelivr.net/npm/@ryanmorr/ready@1.4.1/dist/umd/ready.min.js"></script>
<script>(function(){ ready('.js-post-submit-lightbox', function(){ pluginLightbox(); const link=document.querySelector('.js-post-submit-lightbox'); const delay=link ? link.getAttribute('data-delay') * 1000 : 1000; setTimeout(function(){ if (link) link.click()}, delay);})})();</script>
<!-- end Open Lightbox After Form Submission -->

Then add this code to the form post submit field:

<a href="#lightbox_page_url" data-delay="1" class="js-post-submit-lightbox" hidden></a>

In the code, replace page_url with the page URL you want to open.

For example: <a href="#lightbox_thank-you" data-delay="1" class="js-post-submit-lightbox" hidden></a>

You can also abjust a delay before the lightbox opens. By default the delay is set to 1 second. To change it, edit the data-delay attribute. For example, to set a delay to 2 seconds, replace data-delay="1" with data-delay="2" in the code: <a href="#lightbox_thank-you" data-delay="2" class="js-post-submit-lightbox" hidden></a>

Open Lightbox On Hover

To open a lightbox on hover instead of click, add this code before the plugin code: 

<!-- Open Lightbox On Hover -->
<script src="https://cdn.jsdelivr.net/npm/hoverintent@2/dist/hoverintent.min.js"></script>
<script>
  function openLightboxOnHover() {
    var links = [].slice.call(document.querySelectorAll('a[href^="#lightbox"]'));
    links.map(function(link) { hoverintent(link, link.click )});
  }
  document.addEventListener('DOMContentLoaded', openLightboxOnHover);
  window.addEventListener('mercury:load', openLightboxOnHover);
</script>
<!-- end Open Lightbox On Hover -->

Disable Lightbox on Mobile

To disable the lightbox plugin on mobile add this code before the plugin code: 

<!-- Disable Lightbox Plugin on Mobile -->
<script>
function resetLightboxLinks(){[].slice.call(document.querySelectorAll('a[href^="#lightbox_"]')).forEach((function(l){var href=l.getAttribute("href");-1!==href.indexOf("#block")?l.removeAttribute("href"):l.setAttribute("href",href.replace("#lightbox_",""))}))}
setTimeout(function () {
  if (Y.UA.mobile) {
    resetLightboxLinks();
  } else {
    pluginLightbox();
  }
}, 1000);
</script>
<!-- end Disable Lightbox Plugin on Mobile -->
Dmytro Kyselov http://dmytrokyselov.com/
Previous

General Knowledgebase
Next

Swatches