Team:BNU-China/js/filter.js
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 };