使用同位素过滤器和多个过滤器时，如何仅在fancybox中显示过滤的图像?

我只想显示已被滤除的图像，当前，如果您滤除图像并单击以在fancybox中打开图像，它将显示所有图像，而不仅仅是滤过的图像.

I want to only show the images that are have been filtered out, currently if you filter out images and click to open image in fancybox it shows all the images instead of just the filtered ones.

$(".fancybox").fancybox({
    padding: 0,
    tpl: {
        closeBtn: '<a title="Close" class="fancybox-item fancybox-close custom-fancybox-close" href="javascript:;"></a>'
    },
    beforeShow: function () {

            // New line
            this.title = this.title += '<span class="gallery-title-wrapper"><a href="' + $(this.element).data("gallery-link") + '">' + $(this.element).data("gallery-link-text") + '</a> ' + $(this.element).data("caption") + '</span>';

            // Add tweet button
            this.title += '<span class="gallery-social-wrapper">' +
                '<span class="gallery-share-text">SHARE</span>' +
                '<a data-pin-do="buttonBookmark" data-pin-custom="true" data-pin-save="false" data-pin-log="button_pinit_bookmarklet" data-pin-href="https://uk.pinterest.com/pin/create/button/"><i class="fa fa-pinterest-square gallery-pinterest" aria-hidden="true"></i></a>' +
                '<a target="_blank" href="http://www.facebook.com/share.php?u=' + $(this.element).data("gallery-link") +' "><i class="fa fa-facebook-official gallery-facebook" aria-hidden="true"></i></a>' +
                '</span>';
    }
});

我的同位素JS

    $(document).ready(function () {

    var parentFilterArrowWrapper = $('.parent-filter-arrow-wrapper');

    // If the kitchen options is selected then we want to show the layout filters
    $('.kitchen-checkbox').change(function () {
        $('.complete-layout-filter-wrapper').toggle();
    });

    function openCloseGalleryFilter(element) {
        element.find('.parent-filter-icon').toggleClass('fa-angle-up fa-angle-down');
        element.parent().next('.child-filter-wrapper').slideToggle('fast');
    }

    // This toggles the up/down arrows
    parentFilterArrowWrapper.on('click', function () {
       openCloseGalleryFilter($(this));
    });

    // If we are on tablet/mobile we want the filters to be closed initially as they take up quite a bit of space.
    if ($(window).width() <= 768){
        openCloseGalleryFilter(parentFilterArrowWrapper);
    }

    var initial_items = 6;
    var next_items = 6;

    // init Isotope
    var $grid = $('.grid').isotope({
        itemSelector: '.gallery-image',
        layoutMode: 'fitRows'
    });


// filter with selects and checkboxes
    var $checkboxes = $('.gallery-filter-wrapper input');

    // If the URL contains a has e.g website.com/products/#filter=.kitchen
    if (location.hash) {
        onHashchange();
        updateFilterCounts();
    }

    $checkboxes.change( function() {
        $('.gallery-load-more-btn').remove();

        // Remove hash if a checkbox is clicked
        location.hash = "";

        // Map input values to an array
        var inclusives = [];
        // Inclusive filters from checkboxes
        $checkboxes.each( function( i, elem ) {
            // If checkbox, use value if checked
            if ( elem.checked ) {
                inclusives.push( elem.value );
            }
        });

        // Combine inclusive filters, make a string and remove space so we concat values. e.g .kitchen.gallery etc
        var filterValue = inclusives.length ? inclusives.join('') : '*';

        $grid.isotope({ filter: filterValue });

        updateFilterCounts();

    });

    function updateFilterCounts() {
        // get filtered item elements
        var itemElems = $grid.isotope('getFilteredItemElements');
        var count_items = $(itemElems).length;

        if (count_items > initial_items) {
            $('#showMore').show();
        }
        else {
            $('#showMore').hide();
        }
        if ($('.gallery-image').hasClass('visible_item')) {
            $('.gallery-image').removeClass('visible_item');
        }
        var index = 0;

        $(itemElems).each(function () {
            if (index >= initial_items) {
                $(this).addClass('visible_item');
            }
            index++;
        });
        $grid.isotope('layout');
    }

    function showNextItems(pagination) {
        var itemsMax = $('.visible_item').length;
        var itemsCount = 0;
        $('.visible_item').each(function () {
            if (itemsCount < pagination) {
                $(this).removeClass('visible_item');
                itemsCount++;
            }
        });
        if (itemsCount >= itemsMax) {
            $('#showMore').hide();
        }
        $grid.isotope('layout');
    }

    // function that hides items when page is loaded
    function hideItems(pagination) {
        var itemsMax = $('.gallery-image').length;
        var itemsCount = 0;
        $('.gallery-image').each(function () {
            if (itemsCount >= pagination) {
                $(this).addClass('visible_item');
            }
            itemsCount++;
        });
        if (itemsCount < itemsMax || initial_items >= itemsMax) {
            $('#showMore').hide();
        }
        $grid.isotope('layout');
    }
    $('#showMore').on('click', function (e) {
        e.preventDefault();
        showNextItems(next_items);
    });
    hideItems(initial_items);


    function getHashFilter() {
        // get filter=filterName
        var matches = location.hash.match( /filter=([^&]+)/i );
        var hashFilter = matches && matches[1];
        return hashFilter && decodeURIComponent( hashFilter );
    }

    var isIsotopeInit = false;

    function onHashchange() {
        var hashFilter = getHashFilter();
        if ( !hashFilter && isIsotopeInit ) {
            return;
        }
        isIsotopeInit = true;
        // filter isotope
        $grid.isotope({
            itemSelector: '.gallery-image',
            layoutMode: 'fitRows',
            filter: hashFilter
        });

        // Set checkbox to be checked
        if ( hashFilter ) {
            $(hashFilter + '-checkbox').attr('checked', true);
        }
    }

    $(window).on( 'hashchange', onHashchange );

    // trigger event handler to init Isotope
    onHashchange();

    $(".img-check").click(function(){
        $(this).toggleClass("image-checked");
    });

    $('.reset-filters').on( 'click', function() {
        // reset filters
        $grid.isotope({ filter: '*' });
        // reset checkboxes
        $checkboxes.prop('checked', false);

        // location.hash = '';

        updateFilterCounts();
    });


    var amountOfImagesDisplayed = $('.gallery-image').length;
    var totalGalleryImages = $('.total-amount-of-gallery-images').val();

    function galleryImageCheck() {
        if(amountOfImagesDisplayed >= totalGalleryImages) {
            $('.gallery-load-more-btn').fadeOut('fast');
        }

    }
    galleryImageCheck();

        $('.gallery-load-more-btn').on('click', function(e) {
            e.preventDefault();

            //Gets the amount of past events that are currently displayed on the page
            $.post('/gallery/seeMoreGalleryImages', {amountOfImages: amountOfImagesDisplayed}, function(data) {

                var $content = $(data);

                $grid.append($content).isotope( 'appended', $content );
                $grid.isotope('layout');

                amountOfImagesDisplayed = $('.gallery-image').length;
                galleryImageCheck();


            });
        });



});

布局外观的屏幕截图: