jQuery Masonry not working in my script

Question

I can't get even the slightest bit of Masonry to work. I am mind-boggled! Here is the code:

<LINK rel="Stylesheet" href="App_Themes/Theme1/Style.css"  type="text/css">
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js" />
<script src="Scripts/jquery.masonry.min.js" />
<script src="Scripts/modernizr-transitions.js" />
<script src="Scripts/box-maker.js" />
<script>
    $(function () {
        var $container = $('#container');
        $('#mini-container').masonry({
            columnWidth: 20
        });
        $container.masonry({
            itemSelector: '.w1',
            columnWidth: 120,
            isAnimated: true,
            gutterWidth: 2,

            animationOptions: {
                durantion: 750,
                easing: 'linear',
                queue: false
            }
        });

        $container.masonry({
            itemSelector: '.mini',
            columnWidth: 120
        });

        $container.masonry({
            itemSelector: '.myImages',
            columnWidth: 120,
            isAnimated: true
        });
    });
</script>

And here is just a snippet of the html so you can see the div ids and classes - but nothing takes effect.

     <div id="container">
    <div class="mini">
    <p class="w1 h1">Lorem etc.... you know the text</p>
     <div class="myImages">
     <img id="image1" src="Images/green1.jpg" />
     </div>
 <p class="w1 h1">Lorem etc.... you know the text</p>
    <div class="myImages">
     <img id="Img1" src="Images/Marcia_02.jpg" />
     </div>
     <p class="w1 h1">Lorem etc.... you know the text </p>
</div>

I cut out a lot of the text so you can just see that tag names. And the files are in the correct locations according to my JavaScript source. But nothing happens - what's wrong here?

Answer 1

When you include the JavaScript files in your page it should look like this:

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
      <script src="/path/to/jquery.masonry.min.js"></script>

If you are going to do it the way you did (not from Google) you have to make sure the src path is actually pointing to the JavaScript file.

Answer 2

example of your issue

You should close properly your script tags like: <script src=""></script>