|
|
| 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> |
"
