Created
April 23, 2014 12:56
-
-
Save Jursdotme/11214234 to your computer and use it in GitHub Desktop.
Isotope setup for Toro
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
<?php | |
/* | |
Template Name: Isotope Test | |
*/ | |
?> | |
<?php get_header();?> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-sm-12"> | |
<div id="filters" class="btn-group"> | |
<button type="button" class="btn btn-default" data-filter=".drunk">Drunk</button> | |
<button type="button" class="btn btn-default" data-filter=".badass">Badass</button> | |
<button type="button" class="btn btn-default" data-filter="*">All</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="container"> | |
<div class="row masonry" id="isotope-container"> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item drunk badass"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item badass"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item drunk"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item badass"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item drunk"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item drunk badass"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item badass"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item drunk"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item badass"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item drunk"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item drunk badass"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item badass"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item drunk"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item badass"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-12 col-sm-4 col-md-3 isotope-item drunk"> | |
<div class="thumbnail"> | |
<img src="http://placesheen.com/600/420" alt="Test"> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aspernatur quae quam totam tenetur enim cupiditate hic nemo odit ea dolorum dignissimos magni quibusdam. Qui voluptates libero dolore id quidem!</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<?php get_footer();?> |
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
var $container = $('#isotope-container'); | |
// init | |
$container.isotope({ | |
// options | |
itemSelector: '.isotope-item', | |
layoutMode: 'masonry' | |
}); | |
$container.imagesLoaded( function() { | |
$container.isotope('layout'); | |
}); | |
// filter functions | |
var filterFns = { | |
// show if number is greater than 50 | |
numberGreaterThan50: function() { | |
var number = $(this).find('.number').text(); | |
return parseInt( number, 10 ) > 50; | |
}, | |
// show if name ends with -ium | |
ium: function() { | |
var name = $(this).find('.name').text(); | |
return name.match( /ium$/ ); | |
} | |
}; | |
// bind filter button click | |
$('#filters').on( 'click', 'button', function() { | |
var filterValue = $( this ).attr('data-filter'); | |
// use filterFn if matches value | |
filterValue = filterFns[ filterValue ] || filterValue; | |
$container.isotope({ filter: filterValue }); | |
}); | |
// change is-checked class on buttons | |
$('.button-group').each( function( i, buttonGroup ) { | |
var $buttonGroup = $( buttonGroup ); | |
$buttonGroup.on( 'click', 'button', function() { | |
$buttonGroup.find('.is-checked').removeClass('is-checked'); | |
$( this ).addClass('is-checked'); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment