JQuery Masonry doesnt work at all
===

I cant 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.  and 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 alot of the text so you can just see that tag names.  And the files are in the  correct locations according to my Javaascript src text.  But nothing happens?  Whats wrong here?????