jQuery Masonry not working in my script
<p>I can't get even the slightest bit of Masonry to work. I am mind-boggled! Here is the code:</p>

<pre><code>&lt;LINK rel="Stylesheet" href="App_Themes/Theme1/Style.css"  type="text/css"&gt;
&lt;script type="text/javascript" src="Scripts/jquery-1.7.1.min.js" /&gt;
&lt;script src="Scripts/jquery.masonry.min.js" /&gt;
&lt;script src="Scripts/modernizr-transitions.js" /&gt;
&lt;script src="Scripts/box-maker.js" /&gt;
&lt;script&gt;
    $(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
        });
    });
&lt;/script&gt;
</code></pre>

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

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

<p>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?</p>
