Cum adaug class="fancybox" la galeria implicită?

Question

Cum adaug class="fancybox" la galeria implicită?

9 mar. 2012, 12:46:21

Vizualizări: 26.4K

Voturi: 5

Am încercat acest shortcode:

[gallery class="fancybox" link="file" columns="5"]

Dar class="fancybox" nu este adăugată la tag-ul a href al fiecărei imagini.

Cum pot adăuga class="fancybox" la fiecare tag a href??

ps: unde se află codul sursă al galeriei?

alex

1.11K

galerie

Comentarii

ok, testez cu add_filter('wp_get_attachment_link', dar cum mă asigur că se aplică doar la shortcode-ul Gallery?

alex

9 mar. 2012 13:03:23

Ok, am adăugat asta, dar vreau să mă asigur că se aplică doar la shortcode-ul gallery, cum fac asta? `function my_get_attachment_link($html) { $postid = get_the_ID(); $html = str_replace('<a', '<a class="fancybox"', $html); return $html; }

add_filter('wp_get_attachment_link', 'my_get_attachment_link', 10, 1);`

alex

9 mar. 2012 13:17:40

De ce nu schimbi selectorul javascript pe care funcționează fancybox?

sanchothefat

9 mar. 2012 14:08:05

@sanchothefat este pe drumul cel bun. Privești problema greșit. Crești inutil overhead-ul de procesare al galeriei fără un motiv bun.

Dan

31 ian. 2013 18:25:54

Toate răspunsurile la întrebare

Comentarii

jQuery rulează în modul no-conflict în WordPress. Am modificat codul tău în consecință. Ah, și bun venit pe WordPress Stack Exchange!

fuxia

9 mar. 2012 20:40:43

Doar asigură-te că galeria este setată să se lege de fișier, nu de pagina de atașament. M-a prins și pe mine!

kdev

23 aug. 2016 13:37:18

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

Acordă tuturor link-urilor același atribut rel, astfel încât utilizatorul să poată naviga între imagini.

Freek Bron

61

31 ian. 2013 17:46:22

Aceste răspunsuri erau corecte, dar acum fancybox și-a schimbat specificația. Nu mai folosește rel=gallery, ci "data-fancybox=gallery". Deci noile scripturi ar trebui să arate astfel:

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

și

jQuery('.gallery').each(function() {
            // setează atributul rel pentru fiecare galerie
            jQuery(this).find(".gallery-icon a").attr('data-fancybox', 'group-' + jQuery(this).attr('id'));
        });

Aslan French

235

24 oct. 2017 22:19:13

pentru a construi pe aici pe @kaiser -

În mod ideal, fiecare galerie ar trebui să aibă un ID unic, dar acum că articolele și paginile pot avea mai multe galerii, nu este ușor cu PHP să oferi fiecărei galerii un identificator rel unic.

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

Atenție la selectorii tăi, tema ta ar putea să le rescrie. Acest lucru este discutat în detaliu pe http://kaspars.net/blog/wordpress/add-rel-attribute-to-each-gallery-post

orionrush

920

20 mar. 2015 02:37:18

Esteban 391 · Accepted Answer · 2012-03-09T17:41:10Z

Poți folosi javascript/jquery pentru a rezolva această problemă.

Când inserezi o galerie într-un articol WordPress, întreaga galerie este încadrată într-un div cu un ID de genul "gallery-1", dar și o clasă care este întotdeauna "gallery". De asemenea, fiecare element este înconjurat de alte două elemente "dl" și "dt", cu clasele "gallery-item" și "gallery-icon" respectiv.

Așadar, poți folosi jQuery pentru a potrivi fiecare link din aceste clase și a adăuga orice script lightbox dorești.

Dacă folosești fancybox, cred că ceva de genul ar trebui să funcționeze:

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

Poți fi și mai specific, potrivind clasele CSS .gallery .gallery-item .gallery-icon în această ordine și apoi a (pentru link).

Pentru noile galerii Gutenberg, acest cod ar trebui să funcționeze:

jQuery(".wp-block-gallery .blocks-gallery-item a").fancybox();

Dacă dorești ca utilizatorii să poată naviga între imagini ca într-o galerie, atunci folosește:

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

Și pentru noile galerii Gutenberg, folosește acest cod în schimb:

jQuery(".wp-block-gallery .blocks-gallery-item a").fancybox().attr('data-fancybox', 'gallery');

Dacă dorești un control mai fin (pentru mai multe galerii pe aceeași pagină), verifică acest răspuns.

Sau poți folosi un simplu plugin care utilizează aceeași abordare de la Viper007Bond, care funcționează curat și elegant, dar folosind colorbox în schimb.