¿Cómo agregar class="fancybox" a la galería predeterminada?

Question

¿Cómo agregar class="fancybox" a la galería predeterminada?

9 mar 2012, 12:46:21

Vistas: 26.4K

Votos: 5

Intenté usar este shortcode:

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

Pero la clase class="fancybox" no se está agregando a la etiqueta a href de cada imagen.

¿Cómo puedo agregar class="fancybox" a cada etiqueta a href?

PD: ¿dónde está el código fuente de la galería?

alex

1.11K

galería

Comentarios

ok, estoy probando con add_filter('wp_get_attachment_link' pero ¿cómo me aseguro de que solo se aplique al shortcode Gallery?

alex

9 mar 2012 13:03:23

Ok, agregué esto pero me gustaría asegurarme de que solo se aplique al shortcode de galería, ¿cómo lo hago? `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

¿Por qué no cambiar el selector de javascript con el que funciona fancybox?

sanchothefat

9 mar 2012 14:08:05

@sanchothefat está en el camino correcto. Estás viendo el problema de manera equivocada. Estás aumentando la sobrecarga de procesamiento de la galería sin una buena razón.

Dan

31 ene 2013 18:25:54

Todas las respuestas a la pregunta

Comentarios

jQuery se ejecuta en modo sin conflicto en WordPress. He modificado tu código en consecuencia. ¡Ah, y bienvenido a WordPress Stack Exchange!

fuxia

9 mar 2012 20:40:43

Solo asegúrate de que la galería esté configurada para enlazar al archivo, no a la página de adjuntos. ¡A mí me pasó!

kdev

23 ago 2016 13:37:18

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

Asigna a todos los enlaces el mismo atributo rel, de esta manera el usuario podrá desplazarse entre las imágenes.

Freek Bron

61

31 ene 2013 17:46:22

Estas respuestas eran correctas, pero ahora fancybox ha cambiado su especificación. Ya no es rel=gallery, sino "data-fancybox=gallery". Así que los nuevos scripts deberían verse así:

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

y

jQuery('.gallery').each(function() {
            // establecer el rel para cada galería
            jQuery(this).find(".gallery-icon a").attr('data-fancybox', 'group-' + jQuery(this).attr('id'));
        });

Aslan French

235

24 oct 2017 22:19:13

para complementar lo mencionado por @kaiser -

Cada galería idealmente debería obtener un ID único, pero ahora que las entradas y páginas pueden tener múltiples galerías, no es fácil con PHP asignar un identificador rel único a cada galería.

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

Ten cuidado con tus selectores, tu tema podría reescribirlos. Esto se discute en profundidad en 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

Puedes usar javascript/jquery para resolver esto.

Cuando insertas una galería en una publicación de WordPress, toda la galería está envuelta en un div con un ID como "gallery-1" pero también una clase que siempre es "gallery". Además, cada elemento está rodeado por otras dos etiquetas "dl" y "dt", con las clases "gallery-item" y "gallery-icon" respectivamente.

Así que puedes usar jQuery para seleccionar cada enlace dentro de esas clases y añadir cualquier script de lightbox que prefieras.

Si es fancybox, creo que algo así debería funcionar:

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

Puedes ser más específico, seleccionando las clases CSS .gallery .gallery-item .gallery-icon en ese orden y luego el a (para el enlace).

Para las nuevas galerías de Gutenberg, esto debería funcionar:

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

Si quieres que los usuarios puedan navegar entre las imágenes como una galería, entonces usa:

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

Y para las nuevas galerías de Gutenberg, usa esto en su lugar:

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

Si quieres un control más granular (para múltiples galerías en la misma página), revisa esta respuesta.

O usa un plugin simple que utiliza el mismo enfoque de Viper007Bond, que lo hace de forma limpia y ordenada, pero usando colorbox en su lugar.