Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
146 lines (122 sloc) 5 KB
---
title: Index
layout: nil
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{ site.name }}</title>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<style media="screen">
#options > * {
float: left;
margin-right: 10px;
}
#options .option-combo {
display: inline-block;
}
#options h2 {
line-height: 34px;
margin-bottom: 0;
margin-right: 5px;
display: inline-block;
vertical-align: top;
}
#options ul {
margin-right: 20px;
display: inline-block;
}
</style>
</head>
<body>
<h1>{{ site.name }}</h1>
<section id="options" class="clearfix">
<div class="option-combo">
<h2>Filter:</h2>
<ul id="filter" class="option-set floated clearfix">
<li><a href="#show-all" data-filter="*" class="selected">show all</a></li>
<li><a href="#features" data-filter=".feature">features</a></li>
<li><a href="#docs" data-filter=".doc">docs</a></li>
<li><a href="#demos" data-filter=".demo">demos</a></li>
</ul>
</div>
<div class="option-combo">
<h2>Sort:</h2>
<ul id="sort" class="option-set floated clearfix">
<li><a href="#type" data-sort="original-order" class="selected">original order</a></li>
<li><a href="#related" data-sort="related">related</a></li>
<li><a href="#width" data-sort="width">width</a></li>
</ul>
</div>
<div class="option-combo">
<h2>Layout: </h2>
<ul id="layouts" class="option-set floated clearfix">
<li><a href="#fitRows" class="selected">fitRows</a></li>
<li><a href="#straightDown">straightDown</a></li>
<li><a href="#masonry">masonry</a></li>
</ul>
</div>
</section>
<ul id="super-list" class="fitRows clearfix">
<li class="feature" data-category="feature" data-related="etc"><span>An exquisite jQuery plugin for magical layouts</span></li>
<li class="feature" data-category="feature" data-related="filtering"><span>Reveal &amp; hide items with filtering</span></li>
<li class="feature" data-category="feature" data-related="sorting"><span>Re&ndash;order items with sorting</span></li>
<li class="feature" data-category="feature" data-related="layout"><span>Dynamic, intelligent layouts</span></li>
<li class="feature" data-category="feature" data-related="animating"><span>Captivating animations</span></li>
<li class="feature" data-category="feature" data-related="sorting"><span>Sort items by just about anything</span></li>
<li class="feature" data-category="feature" data-related="methods"><span>Powerful methods, simple syntax</span></li>
<li class="feature" data-category="feature" data-related="animating"><span>Progressively enhanced for CSS3 transforms &amp; transitions</span></li>
{% for doc in site.categories.docs reversed %}
<li class="doc" data-category="doc" data-related="{{ doc.related }}"><a href=".{{ doc.url }}">Docs: {{ doc.title }}</a></li>
{% endfor %}
{% for demo in site.categories.demos reversed %}
<li class="demo" data-category="demo" data-related="{{ demo.related }}"><a href=".{{ demo.url }}">Demo: {{ demo.title }}</a></li>
{% endfor %}
<li class="link" data-related="z-etc"><a href="jquery.isotope.min.js">Download jquery.isotope.min.js</a></li>
<li class="link" data-related="z-etc"><a href="http://meta.metafizzy.co/files/isotope-site.zip">Download this project</a></li>
<li class="link" data-related="z-etc"><a href="http://github.com/desandro/isotope">Isotope on GitHub</a></li>
</ul>
{% include footer.html %}
<script src="js/jquery-1.4.4.min.js"></script>
<script src="{{ site.isotope_js }}"></script>
<script>
$(function(){
$list = $('#super-list');
$list.isotope({
layoutMode : 'fitRows',
masonry : {
columnWidth: 220
},
getSortData : {
related : function( $elem ) {
return $elem.attr('data-related');
},
width : function( $elem ) {
return $elem.width();
}
}
});
$('#filter a').click(function(){
var filterName = $(this).attr('data-filter');
$list.isotope({ filter : filterName });
return false;
});
$('#sort a').click(function(){
var sortName = $(this).attr('data-sort');
$list.isotope({ sortBy : sortName });
return false;
});
var currentLayout = 'fitRows';
$('#layouts a').click(function(){
var layoutName = $(this).attr('href').slice(1);
$list.removeClass( currentLayout ).addClass( layoutName );
currentLayout = layoutName;
$list.isotope({ layoutMode : layoutName });
return false;
});
{% include option-buttons.js %}
});
</script>
{% include html-foot.html %}