CODEWITHSUNDEEP
jqueryjquery-masonry
Misha Berezin
Misha Berezin

Reputation: 13

Jquery Masonry doesn't work locally, though works fine at jsFiddle

I have a problem getting Jquery Masonry by Desandro to work locally.

What I mean is: the thing works fine at jsFiddle (http://jsfiddle.net/pozvolte/dwA5G/14/), but as I try to launch an HTML file with the same code locally – well, it doesn't. I tried opening it with Chrome 26 and Firefox 20.

HTML 

<div id="container">
<div class="item">
    <a href="#bosco">
    <img src="http://www.promisedlandblog.com/wp-content/uploads/2010/05/noam_chomsky.jpg">
    </a>
</div>
<div class="item">
    <a href="#berez">
    <img src="http://metrouk2.files.wordpress.com/2013/03/ay_106888896.jpg">
    </a>
</div>
<div class="item">
    <a href="#headcrab">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQAu_KOgafFo71gN5pV3UBGfxUVclnC8vZuZYnGDK0uaD0PNK7L">
    </a>
</div>
<div class="item">
    <a href="#nrktk">
    <img src="http://assets2.lookatme.ru/assets/event_image-image/72/c0/981165/article_image-image-article.jpg">
    </a>
</div>
<div class="item">
    <a href="#utekai">
    <img src="http://www.budyon.org/wp-content/uploads/2012/02/mumiitroll.jpg">
    </a>
</div>
<div class="item">
    <a href="#troll">
    <img src="http://rusrep.ru/images/texts/1002/10023053_pic1.jpeg">
    </a>
</div>

CSS 

div#container {
    width:100%;
    margin:25px;
}

div.item {
    width:240px;
    margin:10px;
    float:left;
}

div.item img {
    width:240px;
}

Javascript

    $(function(){
    $('#container').masonry({
      itemSelector: '.item'
    });
  });

(Of course there also is JQuery 1.6 and the masonry script, loaded from desandro.com.)

Any help is much appreciated.

Update

The script as seen in html file.

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
//<![CDATA[ 
$(window).load(function(){
 $(function(){

    $('#container').masonry({
      itemSelector: '.item'
    });

  });
});//]]>  
</script>

Upvotes: 1

Views: 1227

Answers (1)

Kaloyan
Kaloyan

Reputation: 7352

You're including the masonry before jQuery. Include them in that order:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>

Since it's a jQuery plugin it requires jQuery to be loaded before it in order to work.

Upvotes: 3

Related Questions