0

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)

    });
cabrerahector
  • 3,653
  • 4
  • 16
  • 27
pstype
  • 1
  • 1
  • Check this answer - https://stackoverflow.com/questions/47686070/how-do-i-make-multiple-galleries-on-one-page-using-fancybox – Snuffy Nov 01 '21 at 08:25

2 Answers2

0

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();
Jon Gardner
  • 1
0

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.

Janis
  • 8,593
  • 1
  • 21
  • 27
  • Thanks for the quick feedback. I was able to assign the images to the corresponding galleries. My solution is not very sleek in that I had to assign the identical options 20 times. Is it possible to declare the media elements………….and the options……….only once and enter the individual gallery classes e.g. in a list? (an example would be great.) Unfortunately my programming skills are not sufficient for this. (I am a graphic designer and an enthusiastic, chronically curious self-taught programmer.) – pstype Nov 03 '21 at 21:12
  • But have you tried doing only once, like `$("[data-fancybox]").fancybox();` ? – Janis Nov 04 '21 at 09:27