How to only show filtered images in fancybox when using isotope filters and multiple filters?

问题

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>';
    }
});

My isotope 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();


            });
        });



});

Screenshot of what layout looks like:

回答1:

You simply have to use corresponding selector, for example:

$().fancybox({
  selector : '.element-item:visible > a'
});

See this demo - https://codepen.io/fancyapps/pen/EZKYPN

btw, do not forget to add data-fancybox="images" (you can choose any value here) attribute if you want to enable grouping.

来源：https://stackoverflow.com/questions/46575660/how-to-only-show-filtered-images-in-fancybox-when-using-isotope-filters-and-mult