assign multiple group names to fancybox links

I want to display 3 sort of images from a single gallery using Fancybox gallery. Showing All, Showing Reds and Showing Blues.

In a simple fancybox gallery I use data-fancybox="group" to group a series of images in a single gallery. But in this case I need to exclude other images from GROUP and show the remaining items with matching colors.

So far I decided to remove data-fancybox attribute from images with non-matching colors using extra data tags about colors:

<a data-fancybox-trigger="group">Show all</a>
<a onclick="filterImages('blue')">Filter Blues</a>
<a onclick="filterImages('red')">Filter Reds</a>

<a data-color="red" data-fancybox="group">
    <img src="1.jpg">
</a>
<a data-color="red" data-fancybox="group">
    <img src="2.jpg">
</a>
<a data-color="blue" data-fancybox="group">
    <img src="3.jpg">
</a>
<a data-color="blue" data-fancybox="group">
    <img src="4.jpg">
</a>

<script>
function filterImages(color){
    $('[data-fancybox]').removeAttr("data-fancybox");
    $('[data-color="'+ color +'"]').attr("data-fancybox","group");
    //Finally simulate click on first matching element.
    $('[data-fancybox]')[0].click();
}
</script>

The problem is that I am removing data-fancybox attribte from non-matching images and I don't know how to restore this attribute again when user closes the fancybox gallery. Another solution would be to assign multiple group names to every single element but I didn't find such option in Fancybox documents. Any help is appreciated.

You can initiate fancybox through JS and select the elements you want to display.

See this example:

// Fancybox hides selected element, so use afterClose event to show all elements
$(document).on('afterClose.fb', function(e, instance, slide) {
  $('.images a').show();
});

$('.filter').on('click', 'span', function() {
  let open = jQuery(this).attr("data-open");
  let selector = '.images a';
  if (open == 'blue')
    selector = ".images [data-color='blue']";
  else if (open == 'red')
    selector = ".images [data-color='red']";
  $.fancybox.open($(selector));
});

.filter {
  border-radius: 5px;
  display: inline-flex;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 1rem;
  transition: all 0.3s;
}

.filter span {
  padding: 0.5rem;
  cursor: pointer;
}

.filter span:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet" />

<div class='filter'>
  <span data-open='all'>Show all</span>
  <span data-open='blue'>Filter Blues</span>
  <span data-open='red'>Filter Reds</span>
</div>
<div class='images'>
  <a data-color="red" >
    <img src="https://picsum.photos/200/400">
  </a>
  <a data-color="red" >
    <img src="https://picsum.photos/200/500">
  </a>
  <a data-color="blue" >
    <img src="https://picsum.photos/300/300">
  </a>
  <a data-color="blue" >
    <img src="https://picsum.photos/200/200">
  </a>
</div>