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.
Añada la imagen al bloque requerido. Las opciones posibles son:
- Description
- Gallery
Inserte el siguiente código en el bloque Custom code:

Copy

Full screen

Small screen

 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: