Question 106098 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How to limit or define specific images for each gallery using a class

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)

    });
Tags:

2

Answers


  1. 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();
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search