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

The question:

i tried this shortcode:

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?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

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.

Method 2

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.

Method 3

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'));
        });

Method 4

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.net/blog/wordpress/add-rel-attribute-to-each-gallery-post

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

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