How do i add class="fancybox" to the default gallery?

i tried this shortcode:

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

But the class="fancybox" isn't been added to the a href tag of each image.

How can i add class="fancybox" to each a href tag??

ps: where is the source code of gallery?

i tried this shortcode:

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

But the class="fancybox" isn't been added to the a href tag of each image.

How can i add class="fancybox" to each a href tag??

ps: where is the source code of gallery?

• gallery

Share Improve this question asked Mar 9, 2012 at 10:46 alexalex 1,11233 gold badges1717 silver badges3939 bronze badges 4

• ok i am testing with add_filter('wp_get_attachment_link' but how do i make sure it only applies to the shortcode Gallery? – alex Commented Mar 9, 2012 at 11:03
• Ok i added this but i like to make sure it only applies to the gallery shortcode, how do i do this? 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 Commented Mar 9, 2012 at 11:17
• 3 Why not change the javascript selector that fancybox works on? – sanchothefat Commented Mar 9, 2012 at 12:08
• @sanchothefat is on the right track. You're looking at the problem wrong. You're increasing the overhead of processing the gallery for no good reason. – Dan Commented Jan 31, 2013 at 16:25

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 11

You can use javascript/jquery to solve this.

When you insert a gallery in a wordpress posts, the whole gallery is wrapped by a div with id like "gallery-1" but also a class that's always "gallery". Also, every item is surrounded by two other "dl" and "dt", with class "gallery-item" and "gallery-icon" respectively.

So, you can just use jquery to match every link inside those classes, and add whatever lightbox script you want.

If it's fancybox, i think something like this should work:

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

You can be more specific, matching css classes .gallery .gallery-item .gallery-icon in that order and then the a (for the link).

For the new Gutenberg galleries, this should work:

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

If you want users can navigate between images as a gallery, then use:

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

And for the new Gutenberg galleries, use this instead:

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

If you want more grained control (for multiple galleries on the same page), check this response.

Or use a simple plugin that use the same approach from Viper007Bond, that does clean and nicely, but using colorbox instead.

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

Gives all links the same rel attribute, this way the user will be able to slide between the images.

These answer were all right but now fancybox has changed it's spec. It's no longer rel=gallery, but "data-fancybox=gallery". So the new scripts should look like this

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

and

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

to build on @kaiser here -

Each gallery ideally would get a unique id, but now that posts and pages can have multiple galleries, its not easy with php to give each gallery a unique rel identifier.

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

Mind your selectors, your theme might rewrite them. This is discussed in depth on http://kaspars/blog/wordpress/add-rel-attribute-to-each-gallery-post