How to open only filtered photos in lightbox?

Question

JavaScript

Good afternoon.
Help me please.
There is a block with thumbnails. Using a fairly simple code, we filter by categories using jQuery. After that, by clicking on the thumbnail, you can start viewing the gallery in the lightbox. But the trouble is that my code launches all the photos for viewing, but I would like to see only those that were previously selected by the filter. How to do it?
I can't understand if changing the assignment or deletion of a class lbdoes not affect the selection in any way and the lightbox considers that all images have this class.

I am sure that the solution will be quite simple, but it is not given to me. I'm not a magician, I'm just... Well, you get the idea.

Thanks in advance

https://codepen.io/anon/pen/BOLXQX

Answer 1

How do your filtered images differ from others now? visibility. jQuery has a special selector for this, :visible. Here, with its help, select the next image, for example like this .
UPD. I didn’t notice right away that you have a special class assigned to filtered images - of course, it’s :visiblebetter to use it instead (in the example from the link above, you can simply replace one with another).

Answer 2

It seems that you set the attribute rel="group_name" to the necessary image groups . Then the images will be paged among this group.

Answer 3

fancybox has this https://codepen.io/fancyapps/pen/YQKPYX?editors=1010
or you can do it like this

var $links = $('.fancybox');

$links.on('click', function() {

  $.fancybox.open( $links, {
    // Custom options
  }, $links.index( this ) );

  return false;
});

i.e. after filtering, you can select the desired blocks and click