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
- Abra seu projeto na Conta de Distribuidor e acesse a seção Vitrines > Websites.
- Selecione Abrir Site Builder no cartão do site específico.
- Se seu site incluir múltiplas páginas, selecione aquela que você deseja:
- Selecione o título da página atual no topo do construtor.
- Selecione a página necessária na lista suspensa.
- Adicione a imagem ao bloco necessário. As possíveis opções são:
- Descrição
- Galeria
- Insira o seguinte código no bloco Código personalizado:
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>
- 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)
- Clique em Pré-visualizar para ver suas alterações.
Assista ao vídeo tutorial desta instrução:
Como adicionar seu próprio código
- No Builder, clique em Adicionar bloco e escolha Código personalizado.
- Insira seu próprio código no bloco.
Este artigo foi útil?
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.Links úteis
Última atualização:
29 de Abril de 2026
Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.
