Question

我遇到了cube portfolio 2.0.1的问题，特别是关于jquery.cubeConfig.js

我在wordpress页面上有不同的投资组合类别，但当我只设置一个类别来显示（与templatera）多维数据集组合的页面显示所有类别。

我认为即使我只设置了一个类别，脚本也会加载所有类别。

代码在这里，问题出在defaultFilter字符串：

(function($, window, document, undefined) {
'use strict';

var gridContainer = $('.grid-items'),
    filtersContainer = $('.portfolio-filters'),
    wrap, filtersCallback;


/*********************************
    init cubeportfolio
 *********************************/
gridContainer.cubeportfolio({
    layoutMode: 'grid',
    rewindNav: true,
    scrollByPage: false,
    defaultFilter: '*',
    animationType: gridContainer.data('animation'),
    gapHorizontal: gridContainer.data('gap'),
    gapVertical: gridContainer.data('gap'),
    gridAdjustment: 'responsive',
    mediaQueries: [{
        width: 1100,
        cols: gridContainer.data('cols')
    }, {
        width: 800,
        cols: gridContainer.data('cols')
    }, {
        width: 500,
        cols: 2
    }, {
        width: 320,
        cols: 1
    }],
    caption: 'zoom',
    displayType: 'sequentially',
    displayTypeSpeed: 100,

    // lightbox
    lightboxDelegate: '.cbp-lightbox',
    lightboxGallery: true,
    lightboxTitleSrc: 'data-title',
    lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',

    // singlePage popup
    singlePageDelegate: '.cbp-singlePage',
    singlePageDeeplinking: true,
    singlePageStickyNavigation: true,
    singlePageCounter: '<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>',
    singlePageCallback: function(url, element) {
        // to update singlePage content use the following method: this.updateSinglePage(yourContent)
        var t = this;

        $.ajax({
                url: url,
                type: 'GET',
                dataType: 'html',
                timeout: 5000
            })
            .done(function(result) {
                t.updateSinglePage(result);
            })
            .fail(function() {
                t.updateSinglePage("Error! Please refresh the page!");
            });
    },

    // single page inline
    singlePageInlineDelegate: '.cbp-singlePageInline',
    singlePageInlinePosition: 'above',
    singlePageInlineInFocus: true,
    singlePageInlineCallback: function(url, element) {
        // to update singlePage Inline content use the following method: this.updateSinglePageInline(yourContent)
    }
});



/*********************************
    add listener for filters
 *********************************/
if (filtersContainer.hasClass('cbp-l-filters-dropdown')) {
    wrap = filtersContainer.find('.cbp-l-filters-dropdownWrap');

    wrap.on({
        'mouseover.cbp': function() {
            wrap.addClass('cbp-l-filters-dropdownWrap-open');
        },
        'mouseleave.cbp': function() {
            wrap.removeClass('cbp-l-filters-dropdownWrap-open');
        }
    });

    filtersCallback = function(me) {
        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');
        wrap.trigger('mouseleave.cbp');
    };
} else {
    filtersCallback = function(me) {
        me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
    };
}

filtersContainer.on('click.cbp', '.cbp-filter-item', function() {
    var me = $(this);

    if (me.hasClass('cbp-filter-item-active')) {
        return;
    }

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

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


/*********************************
    activate counter for filters
 *********************************/
gridContainer.cubeportfolio('showCounter', filtersContainer.find('.cbp-filter-item'), function() {
    // read from url and change filter active
    var match = /#cbpf=(.*?)([#|?&]|$)/gi.exec(location.href),
        item;
    if (match !== null) {
        item = filtersContainer.find('.cbp-filter-item').filter('[data-filter="' + match[1] + '"]');
        if (item.length) {
            filtersCallback.call(null, item);
        }
    }
}); })(jQuery, window, document);

你很善良帮助我吗？提前致谢

Answer 1

 Make a function like below for the cubeportfolio initialisation with        filtercriteria as the parameter.



function forfilter(filtercriteria)
{
gridContainer.cubeportfolio({
layoutMode: 'grid',
rewindNav: true,
scrollByPage: false,
defaultFilter: filtercriteria,
animationType: gridContainer.data('animation'),
gapHorizontal: gridContainer.data('gap'),
gapVertical: gridContainer.data('gap'),
gridAdjustment: 'responsive',
mediaQueries: [
{
    width: 1100,
    cols: gridContainer.data('cols')
}, {
    width: 800,
    cols: gridContainer.data('cols')
}, {
    width: 500,
    cols: 2
}, {
    width: 320,
    cols: 1
}],
caption: 'zoom',
displayType: 'sequentially',
displayTypeSpeed: 100,

// lightbox
lightboxDelegate: '.cbp-lightbox',
lightboxGallery: true,
lightboxTitleSrc: 'data-title',
lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',

// singlePage popup
singlePageDelegate: '.cbp-singlePage',
singlePageDeeplinking: true,
singlePageStickyNavigation: true,
singlePageCounter: '<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>',
singlePageCallback: function(url, element) {
    // to update singlePage content use the following method: this.updateSinglePage(yourContent)
    var t = this;

    $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            timeout: 5000
        })
        .done(function(result) {
            t.updateSinglePage(result);
        })
        .fail(function() {
            t.updateSinglePage("Error! Please refresh the page!");
        });
},

// single page inline
singlePageInlineDelegate: '.cbp-singlePageInline',
singlePageInlinePosition: 'above',
singlePageInlineInFocus: true,
singlePageInlineCallback: function(url, element) {
    // to update singlePage Inline content use the following method: this.updateSinglePageInline(yourContent)
}
});
}


then call the function for your categories passing filtercriteria.
 example:-

  var match = /#cbpf=(.*?)([#|?&]|$)/gi.exec(location.href),
    item;
  forfilter(match[1]);

多维数据集组合 - jquery.cubeConfig.js显示动态类别

1 个答案: