how to filter and sort vgrid similar to masonry

i'm using http://blog.xlune.com/2009/09/vgrid/ which is similar to masonry/filtering.html

(can only post one link sos!)

i'm trying to get the filtering and animation similar to masonry

code is as follows

<!DOCTYPE html>

Using Masonray Filter

<script type="text/javascript">

//console.trace(); $(function(){ $("#projects").vgrid({ easeing: "easeOutQuint", time: 400, delay: 500, fadeIn: { time: 500, delay: 50 } });

    var hsort_flg = false;
 $('#filters a').click(function(){ 
      $('.current').removeClass('current');
         var projectType = $(this).attr('class');
         $(this).addClass('current');
         $("#projects").vgsort(function(a,b){                
   var _a = $(a).hasClass(projectType);
   var _b = $(b).hasClass(projectType);
   if(_a == true){
       _a = projectType
       $(a).show();
              }
     else{ 
       _a = "z";
      $(a).hide('slow');        
     }
      if(_b == true){
          _b = projectType
           $(b).show();}
      else{
       _b = "z";
      $(b).hide('slow'); 
     }
   var _c = hsort_flg ? 1 : -1 ;
   return (_a > _b) ? _c * -1 : _c ;

}, "easeInOutExpo", 500, 0); return false; }); });

html

 <ul id="filters">
        <li>Filter by</li>
        <li><a href="#all" class="all current"><span>All</span></a></li>
        <li><a href="#brand" class="brand"><span>Brand</span></a></li>
        <li><a href="#web" class="web"><span>Web</span></a></li>
        <li><a href="#print" class="print"><span>Print</span></a></li>
    </ul>
    <div style="clear:both"></div>
  <div id="projects">
        <div class="brand">
            <h3>brand</h3>
            <img src="/images/Syndicut_test_37.png" width="176" height="266" alt="" /> 
            <strong class="company">Honda</strong> 
            <strong class="title">School Of Dreams</strong> 
            <a href="#">View Project</a>
        </div>
        <div class="web">
            <h3>web</h3>
            <img src="/images/Syndicut_test_28.png" width="180" height="179" alt="" /> 
            <strong class="company">BBC</strong> 
            <strong class="title">Move Like Micheal Jackson</strong> 
            <a href="#">View Project</a>
        </div>
        <div class="web">
            <h3>web</h3>
            <img src="/images/Syndicut_test_30.png" width="180" height="268" alt="" /> 
            <strong class="company">Penderyn Whisky</strong> 
            <strong class="title">Website &amp; Online Store</strong> 
            <a href="#">View Project</a>
        </div>
        <div class="print">
            <h3>print</h3>
            <img src="/images/Syndicut_test_32.png" width="177" height="179" alt="" /> 
            <strong class="company">Abingdon &amp; Witney College</strong> 
            <strong class="title">Identity &amp; Brand Application</strong> 
            <a href="#">View Project</a>
        </div>
        <div class="web">
            <h3>web</h3>
            <img src="/images/Syndicut_test_34.png" width="177" height="267" alt="" /> 
            <strong class="company">Selcia</strong> 
            <strong class="title">Brand &amp; Website</strong> 
            <a href="#">View Project</a>
        </div>
        <div class="brand">
            <h3>brand</h3>
            <img src="/images/Syndicut_test_54.png" width="175" height="177" alt="" /> 
            <strong class="company">Blick Rothenberg</strong> 
            <strong class="title">Brand Re-fresh</strong> 
            <a href="#">View Project</a>
        </div>
        <div class="web">
            <h3>web</h3>
            <img src="/images/Syndicut_test_45.png" width="178" height="267" alt="" /> 
            <strong class="company">Doctors.net.uk</strong> 
            <strong class="title">Identity &amp; Brand</strong> 
            <a href="#">View Project</a>
        </div>
        <div class="web">
            <h3>web</h3>
            <img src="/images/Syndicut_test_52.png" width="177" height="178" alt="" /> 
            <strong class="company">NHS Nice</strong> 
            <strong class="title">Email Campaign</strong> 
            <a href="#">View Project</a>
        </div>
        <div class="brand">
             <h3>brand</h3>
            <img src="/images/Syndicut_test_47.png" width="178" height="267" alt="" /> 
            <strong class="company">Newbury Racecourse</strong> 
            <strong class="title">Website Re-design</strong> 
            <a href="#">View Project</a>
        </div>
        <div class="brand">
             <h3>brand</h3>
            <img src="/images/Syndicut_test_50.png" width="178" height="179" alt="" /> 
            <strong class="company">Zoeftig</strong> 
            <strong class="title">Website</strong> 
            <a href="#">View Project</a>
        </div>
    </div>
</div>

any ideas how i can get the show and hide of the effect as smooth as masonry? or any general help with this script would be ace

ansaurus

tags:

views:

answers:

how to filter and sort vgrid similar to masonry

related questions