Como adiciono class = “fancybox” à galeria padrão?

3

eu tentei este shortcode:

  

[gallery class="fancybox" link="arquivo" colunas="5"]

Mas a classe="fancybox" não foi adicionada à tag href de cada imagem.

Como posso adicionar class="fancybox" a cada tag href?

ps: onde está o código fonte da galeria?

    
por alex 09.03.2012 / 11:46

4 respostas

8

Você pode usar o javascript / jquery para resolver isso.

Quando você insere uma galeria em postagens do wordpress, toda a galeria é envolvida por um div com id como "gallery-1", mas também uma classe que é sempre "gallery". Além disso, cada item é cercado por outros dois "dl" e "dt", com a classe "gallery-item" e "gallery-icon" respectivamente.

Assim, você pode usar o jquery para corresponder a todos os links dentro dessas classes e adicionar qualquer script de lightbox desejado.

Se é o fancybox, acho que algo assim deveria funcionar:

jQuery(".gallery-icon a").fancybox();

Você pode ser mais específico, combinando as classes css .gallery .gallery-item .gallery-icon nessa ordem e, em seguida, o a (para o link).

Se você quiser que os usuários naveguem entre as imagens como galeria, use:

jQuery(".gallery-icon a").fancybox().attr('data-fancybox', 'gallery');

Se você quiser um controle mais granulado (para várias galerias na mesma página), verifique essa resposta .

Ou use um plugin simples que use a mesma abordagem de Viper007Bond , que limpa e bem, mas usando colorbox em vez disso.

    
por TCattd 09.03.2012 / 16:41
4
jQuery(".gallery-icon a").fancybox().attr('data-fancybox', 'wp-gallery-fancybox');

Dá a todos os links o mesmo atributo rel, dessa forma o usuário poderá deslizar entre as imagens.

    
por Freek Bron 31.01.2013 / 16:46
0

para construir no @kaiser aqui -

Cada galeria idealmente teria um ID único, mas agora que as postagens e as páginas podem ter várias galerias, não é fácil com o php dar a cada galeria um identificador único.

jQuery('.gallery').each(function (g) {
    jQuery('a', this).attr('rel', function (i, attr) {
         return attr + ' gallery-' + g;
    });
});'

Cuidado com seus seletores, seu tema pode reescrevê-los. Isso é discutido em profundidade em enlace

    
por orionrush 20.03.2015 / 01:37
0

Estas respostas estavam bem, mas agora o fancybox mudou suas especificações. Não é mais rel = gallery, mas "data-fancybox = gallery". Então os novos scripts devem se parecer com isso

 jQuery(".gallery-icon a").fancybox().attr('data-fancybox', 'gallery');

e

jQuery('.gallery').each(function() {
            // set the rel for each gallery
            jQuery(this).find(".gallery-icon a").attr('data-fancybox', 'group-' + jQuery(this).attr('id'));
        });
    
por David A. French 24.10.2017 / 21:19

Tags