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?
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It only takes a minute to sign up.
Sign up to join this communityi 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?
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.
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
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'));
});
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 Mar 9 '12 at 11:17