Masonry
and imagesLoaded
should be loaded and work correctly. A similar site has been made, and there it works correctly. I have no idea where my problem is, so I am hoping that you maybe see the problem. There should be something missing.
In Chrome Inspect I get the following error:
Uncaught TypeError: $(...).imagesLoaded is not a function
By what I have understood this means that .imagesLoaded
and Masonry
should be correctly loaded? Else I would have recieved the error $container.imagesLoaded is not a function
?
What I have tried
- Checking if jquery-2.1.4.min.js is properly loaded
- Changing the order of when the jquery is loaded
- Searching online
- Searching for errors within the jquery
Header
<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/jquery-2.1.4.min.js"></script>
<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/collection.js"></script>
<?php wp_head(); ?>
HTML
<div class="container">
<div id="masonry-container" class="row nomargin">
<div class="col-md-9">
<div class="item col-lg-4 col-md-4 col-sm-4">
<!--- Content --->
</div>
<div class="item col-lg-4 col-md-4 col-sm-4">
<!--- Content --->
</div>
<div class="item col-lg-4 col-md-4 col-sm-4">
<!--- Content --->
</div>
</div>
<div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12">
<!--- Content --->
</div>
</div>
</div>
Footer
<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/masonry.pkgd.min.js"></script>
<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/imagesloaded.js"></script>
<script>
$('#masonry-container').imagesLoaded( function(){
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true,
isFitWidth: true
});
});
$(window).resize(function() {
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true
}, 'reload');
});
</script>
It seems that you have a Javascript conflict. To solve this issue you can putting jQuery Into No-Conflict Mode. Check out the jQuery noConflict function.
So try this :
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
$('#masonry-container').imagesLoaded( function(){
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true,
isFitWidth: true
});
});
$(window).resize(function() {
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true
}, 'reload');
});
});
来源:https://stackoverflow.com/questions/34899931/masonry-imagesloaded-not-a-function