How to hide pics in jquery filterable gallery?

Hi
I have combined two scripts for a gallery. When the user clicks on a button, the images from that group are shown. When the user clicks on an image a lightbox appears and the user can go through all the images instead of the images from that group only. I tried to ass a class named hide-pics to make the rest of the images hidden, but I failed.
The script is below
(function($) {

  'use strict';

  var $filters = $('.filter [data-filter]'),
    $boxes = $('.boxes [data-color]');

  $filters.on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
   
    $filters.removeClass('active');
    $this.addClass('active');

    var $filterColor = $this.attr('data-filter');

    if ($filterColor == 'all') {
      $boxes.removeClass('is-animated')
        .fadeOut().promise().done(function() {
          $boxes.addClass('is-animated').fadeIn();
        });
    } else {
      $boxes.removeClass('is-animated')
        .fadeOut().promise().done(function() {
          $boxes.filter('[data-color = "' + $filterColor + '"]')
            .addClass('is-animated').fadeIn();
                  
        });
    }
  });

})(jQuery);

The gallery is here (Arată tot button means Show all)
http://europrietenia.ro/actiuni-de-ecologizare.html

Thx