Cómo mostrar imágenes en ventanas modales
Cómo funciona
Para que la visualización de imágenes resulte más cómoda a los usuarios, puede establecer la apertura de imágenes en ventanas modales mediante un código HTML personalizado. Puede utilizar una solución existente o añadir su propio código.
Cómo conseguirlo
Utilizar una solución existente
- Abra su proyecto en Cuenta del editor y vaya a Storefronts > Websites.
- Haga clic en Open Site Builder.
- Si su sitio tiene varias páginas, seleccione la que necesite:
- Haga clic en el título de la página actual, situado en la parte superior del creador.
- Seleccione la página que necesita de la lista desplegable.
- Añada la imagen al bloque correspondiente. Las opciones disponibles son:
- Description
- Gallery
- Introduzca el siguiente código en el bloqueCustom code:
Copy
- html
1<script>
2(function () {
3 var blocks = ['.block--description', '.block--gallery'];
4
5 var style = document.createElement('link');
6 style.rel = 'stylesheet';
7 style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
8 document.getElementsByTagName('head')[0].appendChild(style);
9
10 var script = document.createElement('script');
11 script.type = 'text/javascript';
12 script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
13 script.addEventListener('load', function () {
14 var fancyBoxClass = 'image-fancybox';
15 blocks.forEach(function (block) {
16 $(block)
17 .find('[data-bg]')
18 .toArray()
19 .forEach(function (element) {
20 var url = element.getAttribute('data-bg')
21 .replace('url(', '')
22 .replace(')', '')
23 .replace('"', '')
24 .trim();
25 if (url === '') {
26 return;
27 }
28 $(element)
29 .parent()
30 .wrap(`<a style="width: 100%; height: 100%;" class="${fancyBoxClass}" href="${url}"></a>`);
31 });
32 });
33
34 $(`.${fancyBoxClass}`)
35 .fancybox();
36 }, false);
37 document.getElementsByTagName('body')[0].appendChild(script);
38})();
39</script>
- En el parámetro
blocks, especifique los nombres de las clases CSS de los bloques a los que se aplicará esta ventana modal. Utilice comas para separar los nombres. Si hay varios bloques idénticos en su sitio web, estos parámetros se aplicarán a todos ellos. Las opciones posibles son:- .block--description (el bloque Description )
- .block--gallery (el bloque Gallery )
- Haga clic en Preview para ver sus cambios.
Vea el tutorial en vídeo para seguir estas instrucciones:
Agregar su propio código
- En Builder, haga clic en Add block y seleccione Custom code.
- Inserte su propio código en el bloque.
¿Te ha resultado útil este artículo?
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.Enlaces útiles
Última actualización:
29 de Abril de 2026
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.
