user1902427 user1902427 - 1 month ago 20
CSS Question

masonry imagesLoaded, $(...).imagesLoaded is not a function

I have looked through similar problems like I have on here, but still couldn't figure out my problem.
I have several images on a website, that I want to be ordered in a masonry style. However, sometimes they get stacked on top of each other, so I tried to add imagesLoaded function, but I get the error: $(...).imagesLoaded is not a function.

here are my linked scripts in html code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="mymasonry.js"></script>


here are the images I want to be displayed:

<div class="container">
<div class="row centered mt mb">

<div class="col-lg-4 col-md-4 col-sm-4 gallery post">
<img src="images/a1.jpg" class="img-responsive">Size: x <br> Title: </div>
<div class="col-lg-4 col-md-4 col-sm-4 gallery post">
<img src="images/a2.jpg" class="img-responsive">Size: x <br> Title: </div>
<div class="col-lg-4 col-md-4 col-sm-4 gallery post">
<img src="images/a3.jpg" class="img-responsive">Size: x <br> Title: </div>
<div class="col-lg-4 col-md-4 col-sm-4 gallery post">
<img src="images/a4.jpg" class="img-responsive">Size: x <br> Title:</div>
<div class="col-lg-4 col-md-4 col-sm-4 gallery post">
<img src="images/a5.jpg" class="img-responsive">Size: x <br> Title:</div>
</div>

</div>


and here is my javascript code for masonry and imagesLoaded that I want to use.

$(document).ready(function(){

$('.container').imagesLoaded(function(){

$(function(){

var m = new Masonry($('.centered').get()[0], {
itemSelector: ".post"
});

})
})
});


What am I doing wrong? I am linking the imagesLoaded javascript. Why am I getting the error message?

Answer

You are missing the core masonry library. Also I would suggest moving all of your scripts to just above the end body tag. Right now you have an old version of jquery and a bootstrap.js script sitting down there. I have refactored your script dependencies below. Cut and paste those and replace the two scripts you have at the bottom of your page and then remove the scripts from your head.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="mymasonry.js"></script>