You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
13 KiB
HTML
318 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Shuffle</title>
|
|
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
<link rel="stylesheet" href="css/prettify.css" />
|
|
<link href='http://fonts.googleapis.com/css?family=Poly:400,400italic' rel='stylesheet' type='text/css' />
|
|
</head>
|
|
<body>
|
|
<div id="main">
|
|
<header>
|
|
<h1>Shuffle</h1>
|
|
<p>Shuffle and categorize a grid of items</p>
|
|
</header>
|
|
|
|
<section class="downloads">
|
|
<h2>Downloads</h2>
|
|
<a href="js/jquery.shuffle.js">jquery.shuffle.js</a>
|
|
<a href="js/jquery.shuffle.min.js">jquery.shuffle.min.js</a>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<h2>Example</h2>
|
|
|
|
<div class="filter clearfix">
|
|
<ul class="filter-options">
|
|
<li class="active" data-key="all">Most Recent</li>
|
|
<li data-key="wallpaper">Wallpapers</li>
|
|
<li data-key="graphics">Graphic Design</li>
|
|
<li data-key="photography">Photography</li>
|
|
<li data-key="3d">3D Renders</li>
|
|
<li data-key="motion">Motion Graphics</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="grid" class="clearfix">
|
|
<div class="item" data-key='["photography"]'>
|
|
<img src="img/baseball.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="img/originals/baseball.jpg">Photography</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["wallpaper", "3d"]'>
|
|
<img src="img/tennis-ball.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">3D Render, Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["3d", "wallpaper"]'>
|
|
<img src="img/imac.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">3D Render, Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["graphics"]'>
|
|
<img src="img/master-chief.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">Graphic Design</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["3d", "wallpaper"]'>
|
|
<img src="img/es-blue.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">3D Render, Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["photography"]'>
|
|
<img src="img/pumpkin.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">Photography</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["3d", "wallpaper"]'>
|
|
<img src="img/vestride-red.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">3D Render, Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["motion"]'>
|
|
<img src="img/newegg.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">Motion Graphics</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["wallpaper"]'>
|
|
<img src="img/eightfoldarc.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["photography"]'>
|
|
<img src="img/ground.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="img/originals/baseball.jpg">Photography</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["wallpaper"]'>
|
|
<img src="img/grassy-hills.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["3d", "wallpaper"]'>
|
|
<img src="img/vestride-classy.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">3D Render, Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Features</h2>
|
|
|
|
<ul>
|
|
<li>Uses CSS Transitions!</li>
|
|
<li>Filter items by categories</li>
|
|
<li>Items can have multiple categories</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Options</h2>
|
|
|
|
<div>
|
|
<p>Settings you can change (these are the defaults)</p>
|
|
<pre rel="JavaScript" class="prettyprint">
|
|
<code>
|
|
var options = {
|
|
itemWidth : 230, // Width of the grid item
|
|
marginTop : 20, // Top margin
|
|
marginRight: 20, // Right margin
|
|
key : 'all' // Which category to show
|
|
speed : 800, // Speed of the transition (in milliseconds). 800 = .8 seconds
|
|
easing : 'ease-out' // css easing function to use
|
|
};
|
|
</code>
|
|
</pre>
|
|
|
|
<p>The easing function is one of <code>default</code>, <code>linear</code>, <code>ease-in</code>, <code>ease-out</code>, <code>ease-in-out</code>, or <code>cubic-bezier</code>.</p>
|
|
</div>
|
|
|
|
<section>
|
|
<h2>Usage</h2>
|
|
|
|
<div>
|
|
<p>The html structure. The only real important thing here is the 'data-key' attribute. It has to be a <a href="http://jsonlint.com/">valid JSON</a> array of strings.</p>
|
|
<pre rel="HTML" class="prettyprint">
|
|
<code>
|
|
<div id="grid">
|
|
<div class="item" data-key='["photography"]'>
|
|
<img src="img/baseball.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="img/originals/baseball.jpg">Photography</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["wallpaper", "3d"]'>
|
|
<img src="img/tennis-ball.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">3D Render, Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["3d", "wallpaper"]'>
|
|
<img src="img/imac.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">3D Render, Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
<div class="item" data-key='["graphics"]'>
|
|
<img src="img/master-chief.png" alt="" height="145" width="230" />
|
|
<div class="item-details">
|
|
<a href="#">Graphic Design</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
|
|
<p>Sets up the button clicks and runs shuffle</p>
|
|
<pre rel="jQuery" class="prettyprint">
|
|
<code>
|
|
$(document).ready(function(){
|
|
|
|
// Set up button clicks
|
|
$('.filter-options li').on('click', function() {
|
|
var $this = $(this),
|
|
$grid = $('#grid');
|
|
|
|
// Hide current label, show current label in title
|
|
$('.filter-options .active').removeClass('active');
|
|
$this.addClass('active');
|
|
|
|
// Filter elements
|
|
$grid.shuffle($this.attr('data-key'));
|
|
});
|
|
|
|
// instantiate the plugin
|
|
$('#grid').shuffle({
|
|
itemWidth : 230,
|
|
marginTop : 20,
|
|
marginRight: 20,
|
|
key : 'all',
|
|
speed : 800,
|
|
easing : 'ease-out'
|
|
});
|
|
});
|
|
</code>
|
|
</pre>
|
|
|
|
<p>Events that get triggered: <code>shrink.shuffle</code>, <code>shrunk.shuffle</code>, <code>filter.shuffle</code>, and <code>filtered.shuffle</code>.</p>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<h2>Dependencies</h2>
|
|
|
|
<ul>
|
|
<li><a target="_blank" href="http://jquery.com">jQuery</a></li>
|
|
|
|
<li><a target="_blank" href="http://modernizr.com">Modernizr</a>
|
|
<ul>
|
|
<li>A custom Modernizr build has been included with the plugin.</li>
|
|
<li>If you already have Modernizr on your site, you may delete it.</li>
|
|
<li>If you don't know what Modernizr is, leave it!</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<h2>Supported Browsers</h2>
|
|
|
|
<ul>
|
|
<li>Chrome</li>
|
|
<li>Firefox</li>
|
|
<li>IE 7+</li>
|
|
<li>Opera</li>
|
|
<li>Safari</li>
|
|
</ul>
|
|
|
|
<p>
|
|
Browsers that don't support CSS transitions and transforms <strong>*cough*</strong> IE <= 9 <strong>*cough*</strong> will see a less cool, javascript based version of the effect.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Links</h2>
|
|
|
|
<p>
|
|
<a href="https://github.com/Vestride/Shuffle">Github Repo</a><br />
|
|
<a href="http://isotope.metafizzy.co/">Inspired by Isotope</a><br />
|
|
<a href="http://glencheney.com">Me</a>
|
|
</p>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<h2>Changes</h2>
|
|
<ul>
|
|
<li>7.21.12 - Rewrote plugin in more object oriented structure. Added custom events. Updated to Modernizr 2.6.1</li>
|
|
<li>7.3.12 - Removed dependency on the css file and now apply the css with javascript</li>
|
|
</ul>
|
|
|
|
</section>
|
|
</div>
|
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
<script defer src="js/jquery.shuffle.js"></script>
|
|
<script defer src="js/prettify.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
// Make code pretty
|
|
prettyPrint();
|
|
|
|
|
|
// Set up button clicks
|
|
$('.filter-options li').on('click', function() {
|
|
var $this = $(this),
|
|
$grid = $('#grid');
|
|
|
|
// Hide current label, show current label in title
|
|
$('.filter-options .active').removeClass('active');
|
|
$this.addClass('active');
|
|
|
|
// Filter elements
|
|
$grid.shuffle($this.attr('data-key'));
|
|
});
|
|
|
|
// instantiate the plugin
|
|
$('#grid').shuffle({
|
|
itemWidth : 230,
|
|
marginTop : 20,
|
|
marginRight: 20,
|
|
key : 'all',
|
|
speed : 800,
|
|
easing : 'ease-out'
|
|
});
|
|
|
|
|
|
// You can subscribe to custom events: shrink, shrunk, filter, and filtered
|
|
// $('#grid').on('shrink.shuffle shrunk.shuffle filter.shuffle filtered.shuffle', function(evt, shuffle) {
|
|
|
|
// });
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|