Template:Team:BNU-China/head

From 2014.igem.org

(Difference between revisions)
Line 49: Line 49:
</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>
 +
</head>
</head>
<body>
<body>

Revision as of 23:03, 1 August 2014

1 2 4 5 6

    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. ^_^