Como mostrar imagens em janelas modais

Como funciona

Para tornar a visualização de imagens mais conveniente para os usuários, você pode configurar a abertura de imagens em janelas modais por meio de um código HTML personalizado. Você pode usar uma solução existente ou adicionar seu próprio código.

Como obtê-lo

Usando uma solução existente

  1. Abra seu projeto na Conta de Distribuidor.
  2. Na barra lateral, clique em Site Builder.
  3. Clique em Abrir Site Builder.
  4. Adicione a imagem ao bloco necessário. As opções possíveis são:
    • Descrição
    • Galeria
  5. Insira o seguinte código no bloco Código personalizado:
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. No parâmetro blocks, especifique os nomes das classes CSS dos blocos aos quais aplicar essa janela modal. Use vírgulas para separar os nomes. Se houver vários blocos idênticos em seu site, essas configurações serão aplicadas a todos eles. As opções possíveis são:
    • .block--description (o bloco Descrição)
    • .block--gallery (o bloco Galeria)
  2. Clique em Pré-visualizar para ver suas alterações.

Assista ao vídeo tutorial desta instrução:


Como adicionar seu próprio código

  1. No Builder, clique em Adicionar bloco e escolha Código personalizado.
  1. Insira seu próprio código no bloco.
Este artigo foi útil?
Obrigado!
Podemos melhorar alguma coisa? Mensagem
Que pena ouvir isso
Explique porque este artigo não foi útil para você. Mensagem
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.
Avalie esta página
Avalie esta página
Podemos melhorar alguma coisa?

Não quero responder

Obrigado pelo seu feedback!

Links úteis

Última atualização: 26 de Março de 2024

Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.

Relatar um problema
Nós sempre avaliamos nossos conteúdos. Seu feedback nos ajuda a melhorá-los.
Forneça um e-mail para que possamos responder
Obrigado pelo seu feedback!