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