cube portfolio with bootstrap template plugin not working

Viewed 3626

I am using cubeportfolio.js as part of a bootstrap template. It seems to be working but the custom .js part of the template is causing an error in the console.

The template I am using can be seen here, which is working without errors.

The error is 'Uncaught Error: cubeportfolio is already initialized. Destroy it before initialize again!'

For confidentiality reasons I can't post all the code but I have called the jquery.cubeportfolio.min.js at the bottom of the with the custom .js underneath.

Here is the custom .js

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

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


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


/*********************************
    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);
2 Answers

From the error output I’m pretty sure that you instantiate Cube Portfolio twice for the same element.

If you want to instantiate again the plugin call on that element the method destroy

jQuery('#my-grid').cubeportfolio('destroy');

and then the init method to instantiate again

jQuery('#my-grid').cubeportfolio(options);

If you need further help please send me a link to your website to check your code.

Related