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

  1. Abra su proyecto en Cuenta del editor.
  2. En la barra lateral, haga clic en Site Builder.
  3. Haga clic en Open Site Builder.
  4. Añada la imagen al bloque requerido. Las opciones posibles son:
    • Description
    • Gallery
  5. Inserte el siguiente código en el bloque de Custom cod:
Copy
Full screen
Small screen
<script>
(function () {
  var blocks = ['.block--description', '.block--gallery'];

  var style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
  document.getElementsByTagName('head')[0].appendChild(style);

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
  script.addEventListener('load', function () {
    var fancyBoxClass = 'image-fancybox';
    blocks.forEach(function (block) {
      $(block)
        .find('[data-bg]')
        .toArray()
        .forEach(function (element) {
          var url = element.getAttribute('data-bg')
            .replace('url(', '')
            .replace(')', '')
            .replace('"', '')
            .trim();
          if (url === '') {
            return;
          }
          $(element)
            .parent()
            .wrap('<a style="width: 100%; height: 100%;" class="' + fancyBoxClass + '" href="' + url + '"></a>');
        });
    });

    $('.' + fancyBoxClass)
      .fancybox();
  }, false);
  document.getElementsByTagName('body')[0].appendChild(script);
})();
</script>

  1. 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 )
  2. Haga clic en Preview para ver sus cambios.

Vea el tutorial en vídeo para seguir estas instrucciones:


Agregar su propio código

  1. En Builder, haga clic en Add block y seleccione Custom code.
  1. Inserte su propio código en el bloque.
¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.

Enlaces útiles

Última actualización: 26 de Marzo de 2024

¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.

Informar de un problema
Nos esforzamos por ofrecer contenido de calidad. Tus comentarios nos ayudan a mejorar.
Déjanos tu correo electrónico para que te podamos responder
¡Gracias por tu mensaje!