Created
August 22, 2014 08:21
-
-
Save ahmadawais/a7114e0a2e9c509f3f82 to your computer and use it in GitHub Desktop.
Quickstand Filterable Portfolio script for latest jQuery shipped with WordPress
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*----------------------------------------------------------------------------------- | |
Custom JS - All front-end jQuery | |
-----------------------------------------------------------------------------------*/ | |
jQuery.noConflict(); | |
jQuery(document).ready(function() { | |
function portfolio_quicksand() { | |
// Setting Up Our Variables | |
var jQueryfilter; | |
var jQuerycontainer; | |
var jQuerycontainerClone; | |
var jQueryfilterLink; | |
var jQueryfilteredItems | |
// Set Our Filter | |
jQueryfilter = jQuery('.aa_filter li.aa_active a').attr('class'); | |
// Set Our Filter Link | |
jQueryfilterLink = jQuery('.aa_filter li a'); | |
// Set Our Container | |
jQuerycontainer = jQuery('ul.aa_filterable_grid'); | |
// Clone Our Container | |
jQuerycontainerClone = jQuerycontainer.clone(); | |
// Apply our Quicksand to work on a click function | |
// for each for the filter li link elements | |
jQueryfilterLink.click(function(e) | |
{ | |
// Remove the active class | |
jQuery('.aa_filter li').removeClass('aa_active'); | |
// Split each of the filter elements and override our filter | |
jQueryfilter = jQuery(this).attr('class'); | |
// Apply the 'active' class to the clicked link | |
jQuery(this).parent().addClass('aa_active'); | |
// If 'all' is selected, display all elements | |
// else output all items referenced to the data-type | |
if (jQueryfilter == 'all') { | |
jQueryfilteredItems = jQuerycontainerClone.find('li'); | |
} | |
else { | |
jQueryfilteredItems = jQuerycontainerClone.find('li[data-type~=' + jQueryfilter + ']'); | |
} | |
// Finally call the Quicksand function | |
jQuerycontainer.quicksand(jQueryfilteredItems, | |
{ | |
// The Duration for animation | |
duration: 750, | |
// the easing effect when animation | |
easing: 'easeInOutCirc', | |
// height adjustment becomes dynamic | |
adjustHeight: 'dynamic' | |
}); | |
//Initalize our PrettyPhoto Script When Filtered | |
jQuerycontainer.quicksand(jQueryfilteredItems, | |
function () { lightbox(); } | |
); | |
}); | |
} | |
if(jQuery().quicksand) { | |
portfolio_quicksand(); | |
} | |
function lightbox() { | |
// Apply PrettyPhoto to find the relation with our portfolio item | |
jQuery("a[rel^='prettyPhoto']").prettyPhoto({ | |
// Parameters for PrettyPhoto styling | |
animationSpeed:'fast', | |
slideshow:5000, | |
theme:'pp_default', | |
show_title:false, | |
overlay_gallery: false, | |
social_tools: false | |
}); | |
} | |
if(jQuery().prettyPhoto) { | |
lightbox(); | |
} | |
}); // END OF DOCUMENT |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment