Fancybox 3：动态更改数据 - fancybox-group

Question

我正在使用过滤后的图库和数据花式框在排序后对有效项目进行分组，但似乎在更改过滤器后它无效。

获得经过验证的项目后，我相应地更改了data-fancybox属性，但似乎fancybox仅适用于页面加载。

有什么想法吗？

JS：

function Gallery() {
    this.tag = $('.tags-list .tag');
    this.gridItem = $('.grid .grid-item');
    this.activeTags = ['toate'];
    this.itemsList = [];
    this.activeItems = [];
    this.noItem = false;
    this.init();
}

Gallery.prototype.init = function () {
    this.masonry();
    this.itemsListGen();
};

Gallery.prototype.itemsListGen = function () {
    var _this = this;

    $(this.gridItem).each(function () {

        var tags = $(this).attr('data-tag');
        tags = tags.trim();

        // creates an array of objects with every item's id and tags
        _this.itemsList.push({
            'id': $(this).attr('id'),
            'tags': tags.split(' ')
        });
    });

};

Gallery.prototype.masonry = function () {
    $('.grid').masonry({
        // options
        columnWidth: '.grid-sizer',
        itemSelector: '.grid-item',
        percentPosition: true,
        hash: false

    });
};

Gallery.prototype.tagClick = function (e) {
    e.preventDefault();
    // currentTag has the clicked tag
    var currentTag = $(e.currentTarget).attr('data-tag-slug');
    $(e.currentTarget).toggleClass('active');

    if (this.noItem) {
        $('.no-item').remove();
        this.noItem = false;
    }

    // refresh current filters
    this.refreshTags(currentTag);

    if ($(e.currentTarget).attr('data-tag-slug') === 'toate' || this.activeTags.length < 1) {
        this.showAll();
    } else {

        // return validated items based on filters
        this.returnValidItems();

        // refresh the layout with the current items
        this.refreshMasonry();
    }

    this.refreshGallery();
};

Gallery.prototype.refreshTags = function (e) {
    // checks if the current tag is already active
    // if it's active, it removes it and checks if there is any other active tag or should trigger 'toate'
    // if it's not active, it adds it to the activeTags and removes 'toate'

    if (this.activeTags.includes(e)) {
        this.activeTags.splice(this.activeTags.indexOf(e), 1);

    } else {
        this.activeTags.push(e);

        if (this.activeTags.includes('toate')) {
            this.removeToate();
        }
    }

};

Gallery.prototype.refreshGallery = function () {
    $(document).unbind('click.fb-start');

    var _this = this;
    $(this.gridItem).find('a').attr('data-fancybox', 'galerie');
    for (var i = 0; i < this.activeItems.length; i++) {
        var id = _this.activeItems[i];
        $('#' + id).find('a').attr('data-fancybox', _this.activeTags);
    }

    $(this.gridItem).find('a').fancybox();
};

Gallery.prototype.returnValidItems = function () {
//    debugger;
    var newValidatedItems = [];

    for (var i = 0; i < this.itemsList.length; i++) {
        var itemTags = this.itemsList[i].tags;

        for (var j = 0; j < this.activeTags.length; j++) {
            if (itemTags.includes(this.activeTags[j])) {
                if (!newValidatedItems.includes(this.itemsList[i].id)) {
                    newValidatedItems.push(this.itemsList[i].id);
                }
            } else if (newValidatedItems.includes(this.itemsList[i].id)) {
                newValidatedItems.splice(newValidatedItems.indexOf(this.itemsList[i].id), 1);
                break;
            } else {
                break;
            }
        }
    }

    this.activeItems = newValidatedItems;
    if (this.activeItems.length < 1) {
        this.noItemFound();
    }
};

Gallery.prototype.refreshMasonry = function () {
    $('.grid-item').hide();

    for (var i = 0; i < this.activeItems.length; i++) {
        $('#' + this.activeItems[i]).show();
    }

    $('.grid').masonry();
};

Gallery.prototype.showAll = function () {
    console.log('show all');
    this.activeTags = ['toate'];
    this.activeItems = [];
    $('.grid-item').show();
    $('.tags-list').find('.active').removeClass('active');
    $('.tags-list').find('.toate a').addClass('active');
    $('.grid').masonry();
};

Gallery.prototype.removeToate = function () {
    $('.tags-list li.toate > a').removeClass('active');
    this.activeTags.splice(this.activeTags.indexOf('toate'), 1);
};

Gallery.prototype.noItemFound = function () {
    this.noItem = true;
    $('.grid').prepend('<div class="no-item text-center">Nu există nicio poză conform selecţiei</div>');
};

$(document).ready(function () {
    var gallery = new Gallery();
    $('.tags-list .tag a').on('click', $.proxy(gallery.tagClick, gallery));

});