post

Código JavaScript para Transformar Imagens da Galeria Padrão do WordPress em Lightbox Slide com Elementor

Publicado em: 09/04/2024

Categorias: BlogElementorJavaScript (JS)JSWordpress

O WordPress, nativamente, possui um recurso de Galeria, quando você cria posts para seu blog, como mostra abaixo:

image 1

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.

image 2

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:

image 3

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.

Bruno Devs News


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.

Clique aqui e entre em contato


Comentários