How to limit or define specific images for each gallery using a class-CodePudding

I have created numerous picture galleries on the same page. If I click on one gallery picture, fancybox v3.5.7 opens and you are able to click through not just this gallery but all pictures in the WP Media library.

I'd like to limit the view to the specific gallery.

How do I adjust the jQuery code to achieve this?

I know how to give each gallery a class, but where do I put this jQuery code?

With this jQuery line I activate fancybox-3 for WordPress:

$( "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)

    });

CodePudding user response：

From Fancybox’s own documentation:

Galleries are created from elements who have the same "rel" tag

/* 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();

CodePudding user response：

With this code snippet:

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

you are creating one gallery that contains all elements matching your selector.

To create separate galleries, choose different values for data-fancybox attribute.

You can, for example, loop through each gallery, find all links and set the appropriate data-fancybox value.