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.
- Na barra lateral, clique em Site Builder.
- Clique em Abrir Site Builder.
- Adicione a imagem ao bloco necessário. As opções possíveis são:
- Descrição
- Galeria
- Insira o seguinte código no bloco Código personalizado:
Copy
- html
<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>
- 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:
26 de Março de 2024
Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.