如何将class=“FancyBox”添加到默认库？

时间：2012-03-09 作者：alex

我尝试了以下短代码：

[gallery class=“fancybox”link=“file”columns=“5”]

但是class=“fancybox”并没有添加到每个图像的a href标记中。

如何将class=“fancybox”添加到每个a href标记？？

附：gallery的源代码在哪里？

4 个回复

最合适的回答,由SO网友:TCattd 整理而成

您可以使用javascript/jquery来解决这个问题。

当您在wordpress帖子中插入一个图库时，整个图库由一个id为“gallery-1”的div包装，但也是一个始终为“gallery”的类。此外，每个项目都由另外两个“dl”和“dt”包围，分别带有类“gallery item”和“gallery icon”。

因此，您可以使用jquery匹配这些类中的每个链接，并添加您想要的任何lightbox脚本。

如果是fancybox，我认为这样的方式应该可以：

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

您可以更具体地匹配css类.gallery .gallery-item .gallery-icon 按顺序，然后a （用于链接）。

对于新的古腾堡画廊来说，这应该是可行的：

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

如果希望用户可以作为库在图像之间导航，请使用：

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

对于新的古腾堡画廊，请使用以下内容：

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

如果您想要更细粒度的控制（对于同一页面上的多个库），check this response.

或者使用一个使用相同方法的简单插件from Viper007Bond, 这确实干净漂亮，但使用了colorbox。

SO网友:Freek Bron

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

为所有链接提供相同的rel属性，这样用户就可以在图像之间滑动。

SO网友:David A. French

这些答案都是正确的，但现在fancybox已经改变了它的规格。它不再是rel=gallery，而是“data fancybox=gallery”。所以新脚本应该如下所示

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

以及

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

SO网友:orionrush

要在这里建立@kaiser-

理想情况下，每个库都会有一个唯一的id，但现在帖子和页面可以有多个库，用php给每个库一个唯一的rel标识符并不容易。

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

注意你的选择器，你的主题可能会重写它们。这将在上进行深入讨论http://kaspars.net/blog/wordpress/add-rel-attribute-to-each-gallery-post

结束

小码农CODE

如何将class=“FancyBox”添加到默认库？

相关推荐

Overriding Gallery Margin