Template:Team:BNU-China/head
From 2014.igem.org
(Difference between revisions)
Line 19: | Line 19: | ||
}); | }); | ||
</script> | </script> | ||
+ | <script type="text/javascript"> | ||
+ | $(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 | ||
+ | }; | ||
+ | </script> | ||
Revision as of 02:38, 2 August 2014
Well, this is embarrassing. If the wiki still not work well (when you can see those words) after the browser finished loading, It means that version of your browser is too low. IE10 (or higher version), Firefox,Chrome and Safari are recomended. ^_^