post
Código JavaScript para Transformar Imagens da Galeria Padrão do WordPress em Lightbox Slide com Elementor
Publicado em: 09/04/2024 / Atualizado em: 09/04/2024
O WordPress, nativamente, possui um recurso de Galeria, quando você cria posts para seu blog, como mostra abaixo:
Se você tem um site construído com Elementor, você tem habilitado por padrão o lighbox em imagens, e você pode usar isso nas páginas de post, apenas configure a imagem ou galeria do post WordPress para abrir com link da imagem.
Porem, quando você clica nas imagens no frontend do site, elas abrem individualmente, mesmo que seja uma galeria com mais fotos.
Para isso, criei um código javascript, que verifica automaticamente se existe uma galeria no post, e depois adicionar o atributo data-elementor-lightbox-slideshow com um valor único, possibilitando que você tenha mais de 1 galeria no mesmo post, e fiquem separados de forma organizada.
Assim, você pode criar uma galeria com 10 imagens por exemplo, e essas 10 imagens vão abrir em um lightbox, em formato de slideshow, onde seu usuário pode ir navegando entre as imagens.
Segue código javascript abaixo:
<script>
// Seleciona todas as galerias
const galerias = document.querySelectorAll('[class*="wp-block-gallery"]');
galerias.forEach(galeria => {
// Obtém a classe que contém o número da galeria
const classeGaleria = [...galeria.classList].find(classe => classe.startsWith('wp-block-gallery-'));
if (classeGaleria) {
// Define o atributo para cada link dentro da galeria
galeria.querySelectorAll('a').forEach(link => {
link.setAttribute('data-elementor-lightbox-slideshow', classeGaleria);
});
}
});
</script>Você pode adicionar ele no gerenciador de “códigos customizados” do Elementor, como mostra na imagem abaixo:
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/4855
ID de Referência: 4855
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.