"

From 2014.igem.org

$(document).ready(function() {

     var 
       speed = 1000,   // animation speed
       $wall = $('#portfolio .items'),

       masonryOptions = {         // initial masonry options

         itemSelector: '.box:not(.invis)',
         animate: true,
         animationOptions: {
           duration: speed,
           queue: false
         }
       };

$wall.imagesLoaded(function(){

$wall.masonry(masonryOptions);

// Create array of filters from link href var arrFilter = []; $('#filtering-nav a').each(function(){ fhash = $(this).attr('href').replace('#',); if(fhash != 'all'){ arrFilter.push(fhash); } });

// Get the parameter value after the # symbol var url=document.URL.split('#')[1]; if(url == undefined){ url = 'all'; } $('#filtering-nav a.'+url).parent().addClass('active');

if(jQuery.inArray(url, arrFilter) > '-1'){ // set masonry options animate to false masonryOptions.animate = false; // hide boxes that don't match the filter class $wall.children().not('.'+url).toggleClass('invis').hide(); } // imageSetCss($(".box")); // run masonry again $wall.masonry(masonryOptions); // imageFadeIn($(".box")); $wall.animate({opacity: 1},1000);

});

$('#filtering-nav a').click(function(e){ var color = $(this).attr('class'); filterClass = '.' + color; $('#filtering-nav li').removeClass('active'); $(this).parent().addClass('active');

if(filterClass=='.all') { // show all hidden boxes $wall.children('.invis').toggleClass('invis').fadeIn(speed); } else { // hide visible boxes $wall.children().not(filterClass).not('.invis').toggleClass('invis').fadeOut(speed); // show hidden boxes $wall.children(filterClass+'.invis').toggleClass('invis').fadeIn(speed); } $wall.masonry({animate: true}); // set hash in URL location.hash = color; e.preventDefault(); }); }); $.fn.imagesLoaded = function(a) { var b=this.find("img"), c=[], d=this, e=b.length;

if(!b.length){ a.call(this); return this } b.one("load error",function(){ --e===0&&(e=b.length,b.one("load error",function(){ --e===0&&a.call(d)}).each(function(){ this.src=c.shift() }) )} ).each(function(){ c.push(this.src),this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" }); return this };