web-dev-qa-db-fra.com

Comment puis-je ajouter class = "fancybox" à la galerie par défaut?

j'ai essayé ce shortcode:

[galerie class = "fancybox" link = "fichier" columns = "5"]

Mais la classe = "fancybox" n'a pas été ajoutée à la balise a href de chaque image.

Comment puis-je ajouter class = "fancybox" à chacun une balise href?

ps: où est le code source de la galerie?

gallery
3
alex

Vous pouvez utiliser javascript/jquery pour résoudre ce problème.

Lorsque vous insérez une galerie dans une publication wordpress, toute la galerie est entourée d'une div avec un identifiant tel que "gallery-1" mais également une classe qui est toujours "galerie". De plus, chaque élément est entouré de deux autres "dl" et "dt", avec respectivement "class-gallery" et "gallery-icon".

Donc, vous pouvez simplement utiliser jquery pour faire correspondre tous les liens à l'intérieur de ces classes, et ajouter le script lightbox souhaité.

Si c'est du fancybox, je pense qu'un truc comme ça devrait marcher:

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

Vous pouvez être plus spécifique, en faisant correspondre les classes CSS .gallery .gallery-item .gallery-icon dans cet ordre, puis le a (pour le lien).

Si vous souhaitez que les utilisateurs puissent naviguer entre les images en tant que galerie, utilisez:

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

Si vous souhaitez un contrôle plus précis (pour plusieurs galeries sur la même page), cochez cette réponse .

Ou utilisez un simple plugin qui utilise la même approche de Viper007Bond , qui nettoie en douceur, mais en utilisant colorbox à la place.

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

Donne à tous les liens le même attribut rel, ainsi l’utilisateur pourra glisser entre les images.

4
Freek Bron

Ces réponses étaient correctes, mais maintenant, Fancybox a modifié ses spécifications. Ce n'est plus rel = gallery, mais "data-fancybox = gallery". Donc, les nouveaux scripts devraient ressembler à ceci

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

et

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

pour construire sur @kaiser ici -

Chaque galerie aurait idéalement un identifiant unique, mais maintenant que les publications et les pages peuvent avoir plusieurs galeries, il n’est pas facile avec php de donner à chaque galerie un identifiant rel unique.

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

Faites attention à vos sélecteurs, votre thème pourrait les réécrire. Ceci est discuté en profondeur sur http://kaspars.net/blog/wordpress/add-rel-attribute-to-each-gallery-post

0
orionrush