• Meta

  Added about 1 year ago

• Categories

  • Slider
  • Location
  • Scrolling
  • Filter

• Links of interest

  1. Original Source
  2. prettyPhoto jQuery Plugin
  3. scrollTo jQuery Plugin
  4. Flexslider jQuery Plugin
  5. Isotope jQuery Plugin

//////////////////////////////////////////////////////////////
// Set Variables
/////////////////////////////////////////////////////////////

var transitionSpeed = 500;
var scrollSpeed = 700;
var fadeDelay = 100;
var currentProject = "";
var nextProject = "";
var previousHeight = "";
var emptyProjectBoxHeight = 100;
var hasSlideshow = false;

///////////////////////////////		
// iPad and iPod Detection
///////////////////////////////

function isiPad() {
  return (navigator.platform.indexOf("iPad") != -1);
}

function isiPhone() {
  return (
  //Detect iPhone
  (navigator.platform.indexOf("iPhone") != -1) ||
  //Detect iPod
  (navigator.platform.indexOf("iPod") != -1));
}


///////////////////////////////		
// Isotope Browser Check
///////////////////////////////

function isotopeAnimationEngine() {
  if (jQuery.browser.mozilla) {
    return "jquery";
  } else {
    return "css";
  }
}


///////////////////////////////		
// Lightbox
///////////////////////////////	

function lightboxInit() {
  jQuery("a[rel^='prettyPhoto']").prettyPhoto({
    social_tools: false,
    deeplinking: false
  });
}


///////////////////////////////
// Project Filtering 
///////////////////////////////

function projectFilterInit() {
  jQuery('#filterNav a').click(function() {
    var selector = jQuery(this).attr('data-filter');
    jQuery('#projects .thumbs').isotope({
      filter: selector,
      hiddenStyle: {
        opacity: 0,
        scale: 1
      }
    });

    if (!jQuery(this).hasClass('selected')) {
      jQuery(this).parents('#filterNav').find('.selected').removeClass('selected');
      jQuery(this).addClass('selected');
    }

    return false;
  });
}


///////////////////////////////
// Project thumbs 
///////////////////////////////

function projectThumbInit() {

  if (!isiPad() && !isiPhone()) {
    jQuery(".project.small").hover(

    function() {
      if (!jQuery(this).hasClass("selected")) {
        jQuery(this).find('img:last').stop().fadeTo("fast", .3);
      }

    }, function() {
      if (!jQuery(this).hasClass("selected")) {
        jQuery(this).find('img:last').stop().fadeTo("fast", 1);
      }
    });

    jQuery(".project.small").hover(

    function() {

      jQuery(this).find('.title').stop().fadeTo("fast", 1);
      jQuery(this).find('img:last').attr('title', '');

    }, function() {
      if (!jQuery(this).hasClass("selected")) {
        jQuery(this).find('.title').stop().fadeTo("fast", 0);
      }
    });
  }


  jQuery('.thumbs.masonry').isotope({
    // options
    itemSelector: '.project.small',
    layoutMode: 'masonry',
    animationEngine: isotopeAnimationEngine()
  });


  jQuery(".project.small").css("opacity", "1");

  jQuery(".project.small").click(function() {
    jQuery(".thumbs .selected .title").hide();
    jQuery(".thumbs .selected").find('img:last').stop().fadeTo("fast", 1);
    jQuery(".thumbs .selected").removeClass("selected");
    jQuery(this).addClass("selected");
    jQuery(".thumbs .selected .title").show();

    var projectSlug = jQuery(this).attr('id').split('project-')[1];
    jQuery.scrollTo(0, scrollSpeed);
    processProject(projectSlug);
  });

}


///////////////////////////////		
//  Project Loading
///////////////////////////////	

function processProject(projectSlug) {

  // Prevent projecBox from collapsing	
  jQuery("#projectBox").css("height", jQuery("#projectHolder").outerHeight());

  // Fade out the old project	
  if (currentProject != "") {
    jQuery("#projectHolder").fadeOut(transitionSpeed, function() {
      jQuery(".project.ajax").remove();
      currentProject = "";
      if (projectSlug) {
        loadProject(projectSlug);
        jQuery("#ajaxLoading").fadeIn('fast');
      };
    });
  } else {
    //No project currently loaded - open the projectBox to show the loader.	
    if (projectSlug) {
      jQuery("#homeMessage").removeClass('withBorder');
      jQuery("#pageHead").removeClass('withBorder');
      jQuery("#projectBox").animate({
        height: emptyProjectBoxHeight
      }, scrollSpeed, function() {
        jQuery("#ajaxLoading").fadeIn('fast', function() {
          loadProject(projectSlug);
        });
      });
    };
  }

  if (!projectSlug) {
    jQuery("#projectBox").animate({
      height: 0
    }, scrollSpeed, function() {
      jQuery("#homeMessage").addClass('withBorder');
      jQuery("#pageHead").addClass('withBorder');
    });

  }
}


function loadProject(projectSlug) {
  // Scroll to the top of the projects	
  jQuery("#projectHolder").load(
  MyAjax.ajaxurl, {
    action: 'myajax-submit',
    slug: projectSlug
  }, function(response) {

  });
}


function waitForMedia(projectSlug, slideshowDelay) {

  var totalMediaElements = 0;
  var loadedMediaElements = 0;
  var mediaTypes = ['img'];

  for (var i = 0; i <= mediaTypes.length; i++) {
    totalMediaElements += jQuery("#projectHolder " + mediaTypes[i]).length;
  }
  //alert(totalMediaElements);

  if (totalMediaElements > 0) {
    for (var i = 0; i <= mediaTypes.length; i++) {
      jQuery("#projectHolder " + mediaTypes[i]).each(function() {
        jQuery(this).load(function() {
          loadedMediaElements++;
          if (loadedMediaElements == totalMediaElements) {
            jQuery("#ajaxLoading").fadeOut('fast', function() {
              //Set up the slideshow
              jQuery('.flexslider').flexslider({
                slideshowSpeed: slideshowDelay + "000",
                directionNav: false,
                animation: "fade",
                keyboardNav: true
              });
              showProject(projectSlug);
            });
          }
        });

      });
    }
  } else {
    jQuery("#ajaxLoading").fadeOut('fast', function() {
      //Fix Vimeo embed for iPad			
      if (isiPad()) {
        jQuery.each(jQuery("iframe"), function() {
          jQuery(this).attr({
            src: jQuery(this).attr("src")
          });
        });
      }
      showProject(projectSlug);
    });
  }
}

function showProject(projectSlug) {

  // Fade in the new project	
  jQuery("#projectHolder").fadeIn(transitionSpeed);
  currentProject = "project-" + projectSlug;
  jQuery("#" + currentProject).addClass("selected");

  // Adjust the height of project container

  targetHeight = jQuery("#projectHolder").outerHeight();
  jQuery("#projectHolder").css("height", targetHeight);
  jQuery("#projectBox").animate({
    height: jQuery("#projectHolder").outerHeight()
  }, scrollSpeed, function() {
    jQuery("#projectHolder").css("height", "auto");
    jQuery("#projectBox").css("height", "auto");
  });
  previousHeight = targetHeight;

  jQuery("#projectHolder .closeBtn").click(function() {
    jQuery(".thumbs .selected .title").hide();
    jQuery(".thumbs .selected").find('img:last').stop().fadeTo("fast", 1);
    jQuery(".thumbs .selected").removeClass("selected");
    jQuery.scrollTo(0, scrollSpeed);
    processProject();
  });
}


jQuery.noConflict();
jQuery(document).ready(function() {

  lightboxInit();
  projectThumbInit();
  projectFilterInit();

  // Show project is there is a hash in the URL
  var projectSlug = location.hash.replace("\#", "");
  if (projectSlug != "index") {
    processProject(projectSlug);
  }

});



///////////////////////////////		
//  Navigation Scrolling
///////////////////////////////	

(function($) {
  $.fn.reverse = [].reverse; // array.reverse prototype as jQ plugin
  $(function() {
    var nav = $('#header'),
      // nav element
      navY = nav.offset().top,
      // default position
      navHeight = nav.height(),
      // nav height for calculating offsets
      navLinks = nav.find('a[href^="#"]'),
      // on-page links in nav
      pageHeight = $('body').height(),
      sections = $('#content').find('div.section').reverse(),
      // reversed set of nav sections
      scrollPos = $(window).scrollTop(); // where are we on the page?
    $(window).scroll(function() {
      scrollPos = $(this).scrollTop();
      // get the active nav item
      navLinks.removeClass('current');
      sections.each(function() {
        if (scrollPos + navHeight >= $(this).offset().top) {
          navLinks.filter('a[href=#' + $(this).attr('id') + ']').addClass('current');
          return false;
        }
      });
      // sticky state
      if (scrollPos > navY && !nav.hasClass('detached')) {
        nav.addClass('detached');
      } else if (scrollPos <= navY && nav.hasClass('detached')) {
        nav.removeClass('detached');
      }
    });
    // scrollTo on nav click
    navLinks.click(function(e) {
      e.preventDefault();
      var destination = $($(this).attr('href')).offset().top,
        distance;
      // have we taken the nav out of flow? offset by navHeight if so
      if (destination > navY) {
        destination -= navHeight;
      }
      // distance to scroll as a percent of total height of page
      distance = Math.abs((scrollPos - destination) / pageHeight);
      // sqrt the distance to compress the difference a bit
      // otherwise, short distances will appear to scroll too fast, long ones too slowly
      // goal is to feel as 'proportional' as possible without actual linearity
      // this is based on a 1s scroll time for the whole page, adjust as needed
      $(window).scrollTo(destination, Math.sqrt(distance) * 1000, {
        easing: 'swing'
      });
    });

    //set active state on domready
    $(window).scroll()
    // update anything that could be affected by image heights
    .load(function() {
      navY = nav.offset().top;
      pageHeight = $('body').height();
    });
  });
})(jQuery);

//////////////////////////////////////////////////////////////
// Set Variables
/////////////////////////////////////////////////////////////

var transitionSpeed = 500;
var scrollSpeed = 700;
var fadeDelay = 100;
var currentProject = "";
var nextProject = "";
var previousHeight = "";
var emptyProjectBoxHeight = 100;
var hasSlideshow = false;
	
///////////////////////////////		
// iPad and iPod Detection
///////////////////////////////
	
function isiPad(){
    return (navigator.platform.indexOf("iPad") != -1);
}

function isiPhone(){
    return (
        //Detect iPhone
        (navigator.platform.indexOf("iPhone") != -1) || 
        //Detect iPod
        (navigator.platform.indexOf("iPod") != -1)
    );
}


///////////////////////////////		
// Isotope Browser Check
///////////////////////////////

function isotopeAnimationEngine(){
	if(jQuery.browser.mozilla){
		return "jquery";
	}else{
		return "css";
	}
}


///////////////////////////////		
// Lightbox
///////////////////////////////	

function lightboxInit() {
	jQuery("a[rel^='prettyPhoto']").prettyPhoto({
		social_tools: false,
		deeplinking: false
	});
}


///////////////////////////////
// Project Filtering 
///////////////////////////////

function projectFilterInit() {
	jQuery('#filterNav a').click(function(){
		var selector = jQuery(this).attr('data-filter');	
		jQuery('#projects .thumbs').isotope({
			filter: selector,			
			hiddenStyle : {
		    	opacity: 0,
		    	scale : 1
			}			
		});
	
		if ( !jQuery(this).hasClass('selected') ) {
			jQuery(this).parents('#filterNav').find('.selected').removeClass('selected');
			jQuery(this).addClass('selected');
		}
	
		return false;
	});	
}


///////////////////////////////
// Project thumbs 
///////////////////////////////

function projectThumbInit() {
	
	if(!isiPad() && !isiPhone()) {
		jQuery(".project.small").hover(
			function() {
				if(!jQuery(this).hasClass("selected")){
					jQuery(this).find('img:last').stop().fadeTo("fast", .3);
				}
					
			},
			function() {
				if(!jQuery(this).hasClass("selected")){
					jQuery(this).find('img:last').stop().fadeTo("fast", 1);
				}	
		});
		
		jQuery(".project.small").hover(	
			function() {
				
					jQuery(this).find('.title').stop().fadeTo("fast", 1);
					jQuery(this).find('img:last').attr('title','');
				
			},
			function() {
				if(!jQuery(this).hasClass("selected")){
					jQuery(this).find('.title').stop().fadeTo("fast", 0);
				}				
		});
	}	
	
	
	jQuery('.thumbs.masonry').isotope({
		// options
		itemSelector : '.project.small',
		layoutMode : 'masonry',
		animationEngine: isotopeAnimationEngine()
	});	
	

	jQuery(".project.small").css("opacity", "1");	
	
	jQuery(".project.small").click(function(){
		jQuery(".thumbs .selected .title").hide();
		jQuery(".thumbs .selected").find('img:last').stop().fadeTo("fast", 1);	
		jQuery(".thumbs .selected").removeClass("selected");						
		jQuery(this).addClass("selected");		
		jQuery(".thumbs .selected .title").show();
			
		var projectSlug = jQuery(this).attr('id').split('project-')[1];
		jQuery.scrollTo(0, scrollSpeed);		
		processProject(projectSlug);
	});	
	
}
	
	
///////////////////////////////		
//  Project Loading
///////////////////////////////	

function processProject(projectSlug) {	
	
	// Prevent projecBox from collapsing	
	jQuery("#projectBox").css("height", jQuery("#projectHolder").outerHeight());	
	
	// Fade out the old project	
	if(currentProject != "") {			
		jQuery("#projectHolder").fadeOut(transitionSpeed,
			function() {
				jQuery(".project.ajax").remove();
				currentProject = "";						
				if(projectSlug){
					loadProject(projectSlug);
					jQuery("#ajaxLoading").fadeIn('fast');			
				};
			});
	}else{
		//No project currently loaded - open the projectBox to show the loader.	
		if(projectSlug){
			jQuery("#homeMessage").removeClass('withBorder');
			jQuery("#pageHead").removeClass('withBorder');
			jQuery("#projectBox").animate({
				height: emptyProjectBoxHeight
			}, scrollSpeed,
			function() {				
				jQuery("#ajaxLoading").fadeIn('fast',
					function() {
						loadProject(projectSlug);		
				});	
			});					
		};
	}	
	
	if(!projectSlug){
		jQuery("#projectBox").animate({
			height: 0
			}, scrollSpeed,
			function() {				
				jQuery("#homeMessage").addClass('withBorder');
				jQuery("#pageHead").addClass('withBorder');				
			});
							
	}		
}

	
function loadProject(projectSlug) {	
	// Scroll to the top of the projects	
	jQuery("#projectHolder").load(	    
	    MyAjax.ajaxurl,
	    {	        
	        action : 'myajax-submit',	        
	        slug : projectSlug
	    },
	    function( response ) {
	        
	    }
	);
}


function waitForMedia(projectSlug, slideshowDelay) {
	
	var totalMediaElements = 0;
	var loadedMediaElements = 0;
	var mediaTypes = ['img'];
	
	for(var i=0; i<=mediaTypes.length; i++) {
		totalMediaElements += jQuery("#projectHolder " + mediaTypes[i]).length;	
	}
	//alert(totalMediaElements);
	
	if(totalMediaElements > 0){
		for(var i=0; i<=mediaTypes.length; i++) {
			jQuery("#projectHolder " + mediaTypes[i]).each(function() {					
	    		jQuery(this).load(function() {        		
	        		loadedMediaElements++;
	        		if(loadedMediaElements == totalMediaElements) {
						jQuery("#ajaxLoading").fadeOut('fast',
						function(){						
							//Set up the slideshow
				        	jQuery('.flexslider').flexslider({
								slideshowSpeed: slideshowDelay+"000",  
								directionNav: false,					
								animation: "fade",
								keyboardNav: true 
							});
							showProject(projectSlug);
						});
	        		}
	    		});
			
			});	
		}
	}else{
		jQuery("#ajaxLoading").fadeOut('fast',
		function(){	       	
			//Fix Vimeo embed for iPad			
			if(isiPad()) {				
				jQuery.each(jQuery("iframe"), function() {
					jQuery(this).attr({
						src: jQuery(this).attr("src")
					});
				});
			}			
			showProject(projectSlug);			
		});		
	}	
}

function showProject(projectSlug) {		
	
	// Fade in the new project	
	jQuery("#projectHolder").fadeIn(transitionSpeed);	
	currentProject = "project-" + projectSlug;
	jQuery("#" + currentProject).addClass("selected");	
	
	// Adjust the height of project container
	
	targetHeight = jQuery("#projectHolder").outerHeight();	
	jQuery("#projectHolder").css("height", targetHeight);	
	jQuery("#projectBox").animate({
		height: jQuery("#projectHolder").outerHeight()
	}, scrollSpeed,
	function() {
		jQuery("#projectHolder").css("height", "auto");				
		jQuery("#projectBox").css("height", "auto");		
	});	
	previousHeight = targetHeight;	
	
	jQuery("#projectHolder .closeBtn").click(function(){
		jQuery(".thumbs .selected .title").hide();
		jQuery(".thumbs .selected").find('img:last').stop().fadeTo("fast", 1);	
		jQuery(".thumbs .selected").removeClass("selected");		
		jQuery.scrollTo(0, scrollSpeed);	
		processProject();
	});
}
	
	
jQuery.noConflict();
jQuery(document).ready(function(){
	
	lightboxInit();
	projectThumbInit();	
	projectFilterInit();
	
	// Show project is there is a hash in the URL
	var projectSlug = location.hash.replace("\#","");	
	if(projectSlug != "index"){
		processProject(projectSlug);
	}	
	
});



///////////////////////////////		
//  Navigation Scrolling
///////////////////////////////	

(function($){
  $.fn.reverse = [].reverse; // array.reverse prototype as jQ plugin
  $(function(){
    var nav = $('#header'), // nav element
      navY = nav.offset().top, // default position
      navHeight = nav.height(), // nav height for calculating offsets
      navLinks = nav.find('a[href^="#"]'), // on-page links in nav
      pageHeight = $('body').height(),
      sections = $('#content').find('div.section').reverse(), // reversed set of nav sections
      scrollPos = $(window).scrollTop(); // where are we on the page?
    $(window).scroll(function(){
      scrollPos = $(this).scrollTop();
      // get the active nav item
      navLinks.removeClass('current');
      sections.each(function(){
        if(scrollPos + navHeight >= $(this).offset().top){
          navLinks.filter('a[href=#' + $(this).attr('id') + ']').addClass('current');
          return false;
        }
      });
      // sticky state
      if(scrollPos > navY && !nav.hasClass('detached')){
        nav.addClass('detached');
      }else if(scrollPos <= navY && nav.hasClass('detached')){
        nav.removeClass('detached');
      }
    });
    // scrollTo on nav click
    navLinks.click(function(e){
      e.preventDefault();
      var destination = $( $(this).attr('href') ).offset().top,
        distance;
      // have we taken the nav out of flow? offset by navHeight if so
      if(destination > navY){
        destination -= navHeight;
      }
      // distance to scroll as a percent of total height of page
      distance = Math.abs((scrollPos - destination) / pageHeight);
      // sqrt the distance to compress the difference a bit
      // otherwise, short distances will appear to scroll too fast, long ones too slowly
      // goal is to feel as 'proportional' as possible without actual linearity
      // this is based on a 1s scroll time for the whole page, adjust as needed
      $(window).scrollTo(destination, Math.sqrt(distance) * 1000, {easing: 'swing'});
    });

    //set active state on domready
    $(window).scroll()
      // update anything that could be affected by image heights
      .load(function(){
        navY = nav.offset().top;
        pageHeight = $('body').height();
      });
  });
})(jQuery);