Come aggiungere class="fancybox" alla galleria predefinita?

Question

Come aggiungere class="fancybox" alla galleria predefinita?

9 mar 2012, 12:46:21

Visualizzazioni: 26.4K

Voti: 5

Ho provato questo shortcode:

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

Ma class="fancybox" non viene aggiunto al tag a href di ogni immagine.

Come posso aggiungere class="fancybox" ad ogni tag a href?

PS: dove si trova il codice sorgente della galleria?

alex

1.11K

galleria

Commenti

ok sto testando con add_filter('wp_get_attachment_link' ma come faccio a essere sicuro che si applichi solo allo shortcode Gallery?

alex

9 mar 2012 13:03:23

Ok ho aggiunto questo ma vorrei assicurarmi che si applichi solo allo shortcode gallery, come posso fare? `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

Perché non cambiare il selettore javascript su cui lavora fancybox?

sanchothefat

9 mar 2012 14:08:05

@sanchothefat è sulla strada giusta. Stai guardando il problema nel modo sbagliato. Stai aumentando il sovraccarico di elaborazione della galleria senza una buona ragione.

Dan

31 gen 2013 18:25:54

Tutte le risposte alla domanda

Commenti

jQuery funziona in modalità no-conflict in WordPress. Ho modificato il tuo codice di conseguenza. Ah, e benvenuto su WordPress Stack Exchange!

fuxia

9 mar 2012 20:40:43

Assicurati solo che la galleria sia impostata per collegarsi al file, non alla pagina degli allegati. Mi ha fregato anche a me!

kdev

23 ago 2016 13:37:18

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

Assegna a tutti i link lo stesso attributo rel, in modo che l'utente possa scorrere tra le immagini.

Freek Bron

61

31 gen 2013 17:46:22

Queste risposte erano tutte corrette ma ora fancybox ha modificato le sue specifiche. Non si usa più rel=gallery, ma "data-fancybox=gallery". Quindi i nuovi script dovrebbero essere così:

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

e

jQuery('.gallery').each(function() {
            // imposta l'attributo rel per ogni galleria
            jQuery(this).find(".gallery-icon a").attr('data-fancybox', 'group-' + jQuery(this).attr('id'));
        });

Aslan French

235

24 ott 2017 22:19:13

per ampliare quanto detto da @kaiser -

Ogni galleria idealmente dovrebbe avere un ID univoco, ma dato che ora post e pagine possono contenere più gallerie, non è semplice con PHP assegnare a ogni galleria un identificatore rel univoco.

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

Fai attenzione ai selettori, il tuo tema potrebbe modificarli. Questo argomento è discusso in dettaglio su 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

Puoi utilizzare javascript/jquery per risolvere questo problema.

Quando inserisci una galleria in un articolo di WordPress, l'intera galleria è racchiusa in un div con un id come "gallery-1" ma anche una classe che è sempre "gallery". Inoltre, ogni elemento è circondato da altri due tag "dl" e "dt", con le classi "gallery-item" e "gallery-icon" rispettivamente.

Quindi, puoi semplicemente usare jQuery per selezionare ogni link all'interno di quelle classi e aggiungere lo script lightbox che preferisci.

Se stai usando fancybox, penso che qualcosa come questo dovrebbe funzionare:

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

Puoi essere più specifico, selezionando le classi CSS .gallery .gallery-item .gallery-icon in quell'ordine e poi il tag a (per il link).

Per le nuove gallerie Gutenberg, questo dovrebbe funzionare:

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

Se vuoi che gli utenti possano navigare tra le immagini come una galleria, allora usa:

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

E per le nuove gallerie Gutenberg, usa invece questo:

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

Se desideri un controllo più granulare (per più gallerie sulla stessa pagina), controlla questa risposta.

Oppure usa un semplice plugin che utilizza lo stesso approccio di Viper007Bond, che funziona in modo pulito ed elegante, ma utilizzando colorbox invece.