Skip to content

Instantly share code, notes, and snippets.

@Jursdotme

Jursdotme/Isotop.php

Last active August 29, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jursdotme/f89e2199a42dba94acab to your computer and use it in GitHub Desktop.
Save Jursdotme/f89e2199a42dba94acab to your computer and use it in GitHub Desktop.
Download ZIP
Isotope Test Page
Raw
Isotop.php
<?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();?>
Raw
isotope.js
/*====================================
= Isotope Test =
====================================*/
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');
});
});
/*----- End of Isotope Test ------*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment