Cube-Portfolio mit Bootstrap-Vorlage Plugin funktioniert nicht

Question

Ich benutze cubeportfolio.js als Teil einer Bootstrap-Vorlage. Es scheint zu funktionieren, aber der benutzerdefinierte JS-Teil der Vorlage verursacht einen Fehler in der Konsole.

Die Vorlage, die ich verwende, kann here gesehen werden, die ohne Fehler arbeitet.

Der Fehler ist 'Uncaught Error: cubeportfolio ist bereits initialisiert. Zerstöre es, bevor es wieder initialisiert wird! '

Aus Gründen der Vertraulichkeit kann ich nicht den gesamten Code veröffentlichen, aber ich habe die jquery.cubeportfolio.min.js am unteren Rand der mit der benutzerdefinierten .js darunter genannt. Hier

ist der Brauch 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

Sie haben es zu zerstören, bevor 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 
}); 

Es initialisiert wird irgendwo anders und deshalb wirft er einen Fehler, weil er nicht weiß, mit welche cubeportfolio() Instanz hat zu tun.

Answer 2

Von der Fehlerausgabe bin ich ziemlich sicher, dass Sie Cube Portfolio zweimal für das gleiche Element instanziieren.

Wenn Sie auf dieses Element wieder das Plugin Aufruf instanziiert wollen, dass die Methode

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

zerstören und dann wieder die init-Methode instanziiert

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

Wenn Sie weitere Hilfe benötigen senden Sie mir bitte eine Link zu Ihrer Website, um Ihren Code zu überprüfen.