-
-
Save RevConcept/7123408 to your computer and use it in GitHub Desktop.
The remaining elements for Isotope filters you will need
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
/**** Isotope Filtering ****/ | |
.isotope-item { | |
z-index: 2; | |
} | |
.isotope-hidden.isotope-item { | |
pointer-events: none; | |
z-index: 1; | |
} | |
/**** Isotope CSS3 transitions ****/ | |
.isotope, | |
.isotope .isotope-item { | |
-webkit-transition-duration: 0.8s; | |
-moz-transition-duration: 0.8s; | |
-ms-transition-duration: 0.8s; | |
-o-transition-duration: 0.8s; | |
transition-duration: 0.8s; | |
} | |
.isotope { | |
-webkit-transition-property: height, width; | |
-moz-transition-property: height, width; | |
-ms-transition-property: height, width; | |
-o-transition-property: height, width; | |
transition-property: height, width; | |
} | |
.isotope .isotope-item { | |
-webkit-transition-property: -webkit-transform, opacity; | |
-moz-transition-property: -moz-transform, opacity; | |
-ms-transition-property: -ms-transform, opacity; | |
-o-transition-property: -o-transform, opacity; | |
transition-property: transform, opacity; | |
} | |
/**** disabling Isotope CSS3 transitions ****/ | |
.isotope.no-transition, | |
.isotope.no-transition .isotope-item, | |
.isotope .isotope-item.no-transition { | |
-webkit-transition-duration: 0s; | |
-moz-transition-duration: 0s; | |
-ms-transition-duration: 0s; | |
-o-transition-duration: 0s; | |
transition-duration: 0s; | |
} |
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
// Filter items when filter link is clicked | |
$('#filters a').click(function(){ | |
var selector = $(this).attr('data-filter'); | |
$container.isotope({ filter: selector }); | |
return false; | |
}); | |
// Add class based on selection | |
var $optionSets = $('#filters.option-set'), | |
$optionLinks = $optionSets.find('a'); | |
$optionLinks.click(function(){ | |
var $this = $(this); | |
// don't proceed if already selected | |
if ( $this.hasClass('selected') ) { | |
return false; | |
} | |
var $optionSet = $this.parents('.option-set'); | |
$optionSet.find('.selected').removeClass('selected'); | |
$this.addClass('selected'); | |
// make option object dynamically, i.e. { filter: '.my-filter-class' } | |
var options = {}, | |
key = $optionSet.attr('data-option-key'), | |
value = $this.attr('data-option-value'); | |
// parse 'false' as false boolean | |
value = value === 'false' ? false : value; | |
options[ key ] = value; | |
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { | |
// changes in layout modes need extra logic | |
changeLayoutMode( $this, options ) | |
} else { | |
// otherwise, apply new options | |
$container.isotope( options ); | |
} | |
return false; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment