cube portfolio with bootstrap template plugin not working

Question

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);

Answer 1

You have to destroy it before init:

gridContainer.cubeportfolio('destroy');

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

It is initialized somewhere else and therefore it throws an error because it doesn't know with which cubeportfolio() instance has to deal.