Skip to content

Instantly share code, notes, and snippets.

@ahmadawais
Created Aug 22, 2014
Embed
What would you like to do?
Quickstand Filterable Portfolio script for latest jQuery shipped with WordPress
/*-----------------------------------------------------------------------------------
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