Lightbox
Activar Lightbox para la galería
(Producto, Portafolio, Presentación de diapositivas)
Para habilitar una ventana emergente (lightbox) en una galería (Productos, Portafolio, Presentación de diapositivas), añade este código a la sección «Inyección de código» o a la inyección de código del encabezado de una página (para habilitar una ventana emergente en una página concreta):
<!-- 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 -->
Abrir automáticamente la ventana emergente «
» tras enviar el formulario
Para abrir automáticamente una ventana emergente tras enviar un formulario, añade este código a «Inyección de código», debajo del código del plugin:
<!-- 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 -->
A continuación, añade este código al campo de envío del formulario:
<a href="#lightbox_page_url" data-delay="1" class="js-post-submit-lightbox" hidden></a>
En el código, sustituye «page_url» por la URL de la página que quieras abrir.
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>
Abrir la ventana emergente al pasar el cursor por encima
Para abrir una ventana emergente al pasar el cursor por encima, en lugar de al hacer clic, añade este código antes del código del plugin:
<!-- 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 -->
Desactivar Lightbox en dispositivos móviles
Para desactivar el complemento Lightbox en dispositivos móviles, sustituye el código del complemento por este:
<!-- Plugin Lightbox -->
<link href="/s/plugin-lightbox.css" rel="stylesheet">
<script src="/s/plugin-lightbox.js"></script>
<!-- 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 -->
<!-- end Plugin Lightbox -->
