如何使用类限制或定义每个图库的特定图像

Question

我在同一个页面上创建了许多图片库。如果我点击一个图库图片，fancybox v3.5.7就会打开，你不仅可以点击这个图库，还可以点击WP Media库中的所有图片。

我想将视图限制到特定的画廊。

如何调整jQuery代码来实现这一点？

我知道如何给每个图库分配一个类，但是我该把这段jQuery代码放在哪里呢？

使用下面这行jQuery代码，我为WordPress激活了fancybox-3：

$( "a[href$='.jpg'], a[href$='.jpeg'], a[href$='.png'], a[href$='.gif']" ) . attr( 'data-fancybox', 'gallery' ) . fancybox({
    
      buttons: [
        "zoom",
        //"share",
        //"slideShow",
        "fullScreen",
        //"download",
        //"thumbs", // blendet Buttons für Thumbnails ein
        "close"
        ],

    (and so on)

    });

Answer 1

来自Fancybox’s own documentation

rel库是由具有相同“

”标签的元素创建的

/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>   

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 

/* This will create two galleries */
    
$("a.grouped_elements").fancybox();

Answer 2

使用以下代码片段：

$( "a[href$='.jpg'], a[href$='.jpeg'], a[href$='.png'], a[href$='.gif']" ).attr( 'data-fancybox', 'gallery' ).fancybox();

您正在创建一个库，其中包含与您的选择器匹配的所有元素。

要创建单独的图库，请为data-fancybox属性选择不同的值。

例如，您可以遍历每个图库，查找所有链接并设置适当的data-fancybox值。