How can I make this isotope code work with my Wordpress blog posts?

Question

i am trying to integrate this code with my Wordpress theme

I am failing miserably.

// external js: isotope.pkgd.js
$(document).ready(function() {
    var $grid = $('.grid').isotope({
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: 100
        }
    });
    $grid.on('click', '.grid-item', function() {
        // change size of item by toggling gigante class
        var $previousGigante = $grid.find('.gigante').removeClass('gigante');
        if ($previousGigante[0] != this) {
            $(this).toggleClass('gigante');
        }
        $grid.isotope('layout');
    });
});

Can someone point me in the right direction? I'm just getting "is not a function" errors

Answer 1

确保在代码执行之前加载jQuery和isotope（http://isotope.metafizzy.co/isotope.pkgd.js）库。

另请注意，Wordpress jQuery在非冲突模式下工作，因此您应该将所有$符号替换为jQuery或使用如下构造：

(function($){
    $(document).ready(function(){
        //Put your code here
    });
})(jQuery);