Lightbox


Increase Lightbox Width

To increase the lightbox width, add this style after the plugin code and change this number 60 in the style code. This number controls the lightbox width.

<!-- Lightbox Width -->
<style>
@media (min-width: 1024px) {
  .c-lightbox__content {
    max-width: 60%;
  }
}
</style>

Disable Lightbox Plugin on Mobile

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

<!-- Disable Lightbox Plugin on Mobile -->
<script>
if (Y.UA.mobile) resetLightboxLinks();
function resetLightboxLinks() {
  [].slice.call(document.querySelectorAll('a[href^="#lightbox>"]')).forEach(function(l) {
    l.setAttribute('href', l.getAttribute('href').replace('#lightbox>', ''));
  });
}
</script>
<!-- end Disable Lightbox Plugin on Mobile -->

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, function() { link.click() }) });
  }
  document.addEventListener('DOMContentLoaded', openLightboxOnHover);
  window.addEventListener('mercury:load', openLightboxOnHover);
</script>
<!-- end Open Lightbox On Hover -->

Auto Open Lightbox

To automaticly open a lightbox, add this code before the plugin code:

<!-- Plugin Lightbox - Auto Open Lightbox -->
<script>
(function() {
  function openLightbox() {
    // url - the lightbox page URL
    // 0.3 - The number of seconds before open a lightbox
    autoOpenLightbox('url', 0.3); // <- Change url to the lightbox page URL
  }
  function autoOpenLightbox(target, timeout) {
    timeout = timeout * 1000 || 300;
    var link = document.querySelector('a[href="#lightbox>' + target + '"]', 'a[href="#lightbox>/' + target + '"]');
    setTimeout(function() { if (link) link.click() }, timeout);
  }
  document.addEventListener('DOMContentLoaded', openLightbox);
  window.addEventListener('mercury:load', openLightbox);
})();
</script>
<!-- end Plugin Lightbox - Auto Open Lightbox -->
lightboxDmitry Kiselyov