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

Be sure to load jQuery and isotope (http://isotope.metafizzy.co/isotope.pkgd.js) libraries before the code execution.

Also note, that Wordpress jQuery works in non conflict mode, so you should rather replace all of your $ symbols to jQuery or use construction like this:

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