Question

我想只显示已滤除的图像，目前如果你过滤掉图像并点击打开fancybox中的图像，它会显示所有图像，而不仅仅是过滤后的图像。

$(".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();


            });
        });



});

布局的截图：

Answer 1

您只需使用相应的选择器，例如：

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

请参阅此演示 - https://codepen.io/fancyapps/pen/EZKYPN

顺便说一下，如果要启用分组，请不要忘记添加data-fancybox="images"（您可以在此处选择任何值）属性。

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

1 个答案: