活动选项卡中的cube-portfolio插件显示页面加载时的所有项目，而不仅仅是活动项目 [英] cube-portfolio plug in active tab displays all items on page load instead of just the active items

问题描述

我正在使用多维数据集组合插件在页面上显示一组事件.我还使用了过滤器，这些过滤器根据其数据过滤器显示不同的项目.

I am using the cube portfolio plugin to display a set of events on my page. I am also using the filters, that display different items depending on their data-filter.

有一个'all'过滤器，其类别为'cbp-filter-item-active'，显示了页面加载时的所有项目，但由于我不想要它而将其删除，并移动了'cbp-filter-item-活动"类添加到下一个过滤器，但它仍显示所有项目，而不是页面加载时仅属于该类别的项目.

There was an 'all' filter with class 'cbp-filter-item-active' that displayed all items on page load, but I removed it as I didn't want it and moved the 'cbp-filter-item-active' class to the next filter but it still displays all the items, instead of the ones just in that category on page load.

我只希望活动类别中的项目在页面加载时显示，而不是所有项目.

I want just the items in the active category to display on page load, not all the items.

我想这是js中告诉它在加载时显示所有项目的东西吗?我只是不确定哪个部分或如何更改它.

I imagine it's something in the js telling it to display all items on load? i'm just not sure what part or how to change it.

原始过滤器:

<div id="filters-container" class="cbp-l-filters-text content-xs">
                    <div data-filter="*" class="cbp-filter-item-active cbp-filter-item"> All </div> |
                    <div data-filter=".identity" class="cbp-filter-item"> Identity </div> |
                    <div data-filter=".web-design" class="cbp-filter-item"> Web Design </div> |
                    <div data-filter=".graphic" class="cbp-filter-item"> Graphic </div> |
                    <div data-filter=".logos" class="cbp-filter-item"> Logo </div>
                </div><!--/end Filters Container-->

我将其更改为:

<div id="filters-container" class="cbp-l-filters-text content-xs">
                    <div data-filter=".identity" class="cbp-filter-item-active cbp-filter-item"> Identity </div> |
                    <div data-filter=".web-design" class="cbp-filter-item"> Web Design </div> |
                    <div data-filter=".graphic" class="cbp-filter-item"> Graphic </div> |
                    <div data-filter=".logos" class="cbp-filter-item"> Logo </div>
                </div><!--/end Filters Container-->

多维数据集组合JS:

(function ($, window, document, undefined) {

    var gridContainer = $('#grid-container'),
        filtersContainer = $('#filters-container');

    // init cubeportfolio
    gridContainer.cubeportfolio({

        defaultFilter: '*',

        animationType: 'fadeOut',

        gapHorizontal: 20,

        gapVertical: 20,

        gridAdjustment: 'responsive',

        caption: 'zoom',

        displayType: 'sequentially',

        displayTypeSpeed: 100,

        // lightbox
        lightboxDelegate: '.cbp-lightbox',
        lightboxGallery: true,
        lightboxTitleSrc: 'data-title',
        lightboxShowCounter: true,

        // singlePage popup
        singlePageDelegate: '.cbp-singlePage',
        singlePageDeeplinking: true,
        singlePageStickyNavigation: true,
        singlePageShowCounter: true,
        singlePageCallback: function (url, element) {
            // to update singlePage content use the following method: this.updateSinglePage(yourContent)
        },

        // singlePageInline
        singlePageInlineDelegate: '.cbp-singlePageInline',
        singlePageInlinePosition: 'below',
        singlePageInlineShowCounter: true,
        singlePageInlineInFocus: true,
        singlePageInlineCallback: function(url, element) {

            // to update singlePageInline content use the following method: this.updateSinglePageInline(yourContent)
            var t = this;

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'html',
                timeout: 5000
            })
            .done(function(result) {

                t.updateSinglePageInline(result);

            })
            .fail(function() {
                t.updateSinglePageInline("Error! Please refresh the page!");
            });

        }
    });

    // add listener for filters click
    filtersContainer.on('click', '.cbp-filter-item', function (e) {

        var me = $(this), wrap;

        // get cubeportfolio data and check if is still animating (reposition) the items.
        if ( !$.data(gridContainer[0], 'cubeportfolio').isAnimating ) {

            if ( filtersContainer.hasClass('cbp-l-filters-dropdown') ) {
                wrap = $('.cbp-l-filters-dropdownWrap');

                wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');

                wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());

                me.addClass('cbp-filter-item-active');
            } else {
                me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
            }

        }

        // filter the items
        gridContainer.cubeportfolio('filter', me.data('filter'), function () {});

    });

    // add listener for load more click
    $('.button').on('click', function(e) {

        e.preventDefault();

        var clicks, me = $(this), oMsg;

        if (me.hasClass('cbp-l-loadMore-button-stop')) return;

        // get the number of times the loadMore link has been clicked
        clicks = $.data(this, 'numberOfClicks');
        clicks = (clicks)? ++clicks : 1;
        $.data(this, 'numberOfClicks', clicks);

        // set loading status
        oMsg = me.text();
        me.text('LOADING...');

        // perform ajax request
        $.ajax({
            url: me.attr('href'),
            type: 'GET',
            dataType: 'HTML'
        })
        .done( function (result) {
            var items, itemsNext;

            // find current container
            items = $(result).filter( function () {
                return $(this).is('div' + '.cbp-loadMore-block' + clicks);
            });

            gridContainer.cubeportfolio('appendItems', items.html(),
                 function () {
                    // put the original message back
                    me.text(oMsg);

                    // check if we have more works
                    itemsNext = $(result).filter( function () {
                        return $(this).is('div' + '.cbp-loadMore-block' + (clicks + 1));
                    });

                    if (itemsNext.length === 0) {
                        me.text('NO MORE WORKS');
                        me.addClass('cbp-l-loadMore-button-stop');
                    }

                 });

        })
        .fail(function() {
            // error
        });

    });

})(jQuery, window, document);

推荐答案

可能要将js从defaultFilter:'*'更改为defaultFilter:".identity"

might want to change the js from defaultFilter: '*' to defaultFilter: ".identity"

这篇关于活动选项卡中的cube-portfolio插件显示页面加载时的所有项目，而不仅仅是活动项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！