Event Does Not Trigger On The Initial Load

This is a continuation from my other question regarding Changing media screen makes div overlay This problem is associated with Isotope. With help from @Robin Carlo Catacutan I hav

Solution 1:

One thing you should try (and this is related to your first question as well), since your loading images, is to use imagesloaded.js. This will allow all images to load before isotope is initiated which will eliminate overlaps See here. I'm not understanding why do you need to add the class "imgArranged" using javascript if it is in a @media query?

var$container = $('#isotope-list'); //The ID for the list with all the blog posts$container.imagesLoaded( function() {
 $container.isotope({ //Isotope options, 'item' matches the class in the PHP
 itemSelector: '.item',
 layoutMode: 'masonry'
 });
 });

ADENDUM

The problem is you are loading jQuery twice, 2 different versions. You need to pick one. If you pick 2.1.4, you don't use query-migrate

This loads first:

<scriptsrc="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/jquery-2.1.4.min.js"></script><scriptsrc="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/collection.js"></script><scriptsrc="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/less.js"></script><scriptsrc="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/imagesloaded.js"></script><scriptsrc="//use.typekit.net/xti5sne.js"></script>

This loads after:

<scripttype='text/javascript'src='http://www.vekvemedia.no/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script><scripttype='text/javascript'src='http://www.vekvemedia.no/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script><scripttype='text/javascript'src='http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.pkgd.min.js?ver=1'></script><scripttype='text/javascript'src='http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.js?ver=1'></script>