Masonry

Bonjour a tous alors voila j'ai suivis le tuto sur Masonry et je ne comprend pas pk sa ne fonctionne pas =s j'ai pourtant tout bien suivis a la lettre si quelqu'un pourrais me débogué surement que je ne vois pas ou est mon erreur (la fatigue =_= )

index.ctp

<section class="works">
    <?php foreach ($projects as $k => $project): ?>
        <article>
            <div class="bloc">
                <?= $this->Html->link('<span class="roll" ></span>'.$this->Html->image($project'Portfolio']'image'], array('alt' => 'project')), '#'.$project'Portfolio']'id'], array('class' => 'thumb', 'escapeTitle' => false));?>
                <div class="infoproject">
                    <?= $this->Html->image($project'Portfolio']'image'], array('alt' => 'project', 'width'=>'1000', 'height'=>'600')); ?>
                    <h3>Projet perso</h3><span>PHP procédural - HTML5 - CSS3</span>
                </div>
            </div>          
        </article>
    <?php endforeach ?>
        <div class="cb"></div>
    </section>

Style.css

/*Mes dernières réalisations*/
    section.works { height: auto; margin-left: 350px; margin-top: 10px; }
    section.works article { display: inline; float: left; margin-top: 10px;}
    section.works h2 { font-size: 20px; color: #747474; font-weight: 400; }
    section.works article a img { width: 230px; height: 147px; margin-right: 25px; display: inline; margin-top: 15px;}
    section.works article aside { display: none; }
    /* filtre qui s'applique une foi la souris sur le lien img (fonctionne avec le script roll.js )*/
    section.works article span.roll {
        background:url(../img/mag.png) center center no-repeat #000;
        height: 160px;
        position: absolute;
        width: 230px;
        -webkit-box-shadow: 0px 0px 4px #000;
        -moz-box-shadow: 0px 0px 4px #000;
        box-shadow: 0px 0px 4px #000; 
    }
    /* bloc info qui contien les informations sur les projets est en hidden par default jusqu'a se que l'utilisateur décide d'affiché le projet */
    section.works article .bloc .infoproject { display: none; }
    section.works article .bloc.unfold { width: 640px; height: 320px; }
    section.works article .bloc.unfold .infoproject { display: block; }
    section.works .bloc.unfold .thumb {display: none; }
    section.works article .bloc .infoproject h3 { display: block; font-size: 16px; margin-bottom: 0px; color: #747474; width: 200px; font-weight: 400; }
    section.works article .bloc .infoproject span { display: block; font-style: italic; font-size: 14px; color: #747474; width: 200px; }

main.js

jQuery(function($){
    var portfolio = $('.works');
    portfolio.masonry({
        isAnimated: true,
        itemSelector:'.bloc:not(.hidden)',
    });
    $('a').click(function(e)){
        var cls = $(this).attr('href').replace('#','');
        portfolio.find('hidden').fadeIn();
        portfolio.find('.bloc').removeClass('hidden');
        portfolio.find('.bloc:not(.'+cls+')').addClass('hidden').fadeOut();
        portfolio.masonry('reload');
        location.hash = cls;
        e.preventDefault();
    }
    var width = portfolio.find('.bloc:first').width();
    var height = portfolio.find('.bloc:first').height();
    var cssi = {width:width,height:height};

    portfolio.find('a.thumb').click(function(e){
        var elem = $(this); 
        var cls = elem.attr('href').replace('#','');
        portfolio.find('.unfold').removeClass('unfold').css(cssi); 
        var unfold = elem.parent().addClass('unfold'); 
        portfolio.masonry('reload');
        var widthf = unfold.width();
        var heightf = unfold.height();
        unfold.css(cssi).animate({
            width:widthf,
            height:heightf
        })
        location.hash = cls;
        e.preventDefault();
    })

    if(location.hash != ''){
        $('a[href="'+location.hash+'"]').trigger('click');
    }
})

Voila merci d'avance ;)