661 lines
19 KiB
HTML
661 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<title>Isotope</title>
|
|
|
|
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
|
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
|
|
<!-- scripts at bottom of page -->
|
|
|
|
</head>
|
|
<body class="homepage ">
|
|
|
|
<nav id="site-nav">
|
|
<h1><a href="index.html">Isotope</a></h1>
|
|
|
|
<h2>Docs</h2>
|
|
|
|
<ul>
|
|
|
|
|
|
<li><a href="./docs/introduction.html">Introduction</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/options.html">Options</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/methods.html">Methods</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/layout-modes.html">Layout modes</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/filtering.html">Filtering</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/sorting.html">Sorting</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/animating.html">Animating</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/adding-items.html">Adding items</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/extending-isotope.html">Extending Isotope</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/help.html">Help</a>
|
|
|
|
|
|
|
|
<li><a href="./docs/license.html">License</a>
|
|
|
|
|
|
</ul>
|
|
|
|
<h2>Demos</h2>
|
|
|
|
<ul>
|
|
|
|
|
|
<li><a href="./demos/basic.html">Basic</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/elements-complete.html">Elements Complete</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/elements-partial.html">Elements Partial</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/layout-modes.html">Layout modes</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/filtering.html">Filtering</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/sorting.html">Sorting</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/relayout.html">reLayout</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/adding-items.html">Adding items</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/infinite-scroll.html">Infinite Scroll</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/images.html">Images</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/combination-filters.html">Combination filters</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/hash-history.html">Hash history</a>
|
|
|
|
|
|
|
|
<li><a href="./demos/fluid-responsive.html">Fluid / responsive</a>
|
|
|
|
|
|
</ul>
|
|
|
|
<h2>Custom layout modes</h2>
|
|
|
|
<ul>
|
|
|
|
|
|
<li><a href="./custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
|
|
|
|
|
|
|
<li><a href="./custom-layout-modes/category-rows.html">Category rows</a>
|
|
|
|
|
|
|
|
<li><a href="./custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
|
|
|
|
|
|
|
<li><a href="./custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
|
|
|
|
|
|
|
<li><a href="./custom-layout-modes/spine-align.html">Spine align</a>
|
|
|
|
|
|
</ul>
|
|
|
|
<h2><a href="tests/index.html">Tests</a></h2>
|
|
|
|
</nav> <!-- #site-nav -->
|
|
|
|
<section id="content">
|
|
|
|
|
|
<section id="options" class="clearfix">
|
|
<div class="option-combo">
|
|
<h2>Filter:</h2>
|
|
<ul id="filter" class="option-set clearfix" data-option-key="filter">
|
|
<li><a href="#show-all" data-option-value="*" class="selected">show all</a></li>
|
|
<li><a href="#elements" data-option-value=".element:not(.feature)">elements</a></li>
|
|
<li><a href="#features" data-option-value=".feature">features</a></li>
|
|
<li><a href="#examples" data-option-value=".example">examples</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-combo">
|
|
<h2>Sort:</h2>
|
|
<ul id="sort" class="option-set clearfix" data-option-key="sortBy">
|
|
<li><a href="#mixed" data-option-value="number" class="selected">mixed</a></li>
|
|
<li><a href="#original" data-option-value="original-order">original</a></li>
|
|
<li><a href="#alphabetical" data-option-value="alphabetical">alphabetical</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="option-combo">
|
|
<h2>Layout: </h2>
|
|
<ul id="layouts" class="option-set clearfix" data-option-key="layoutMode">
|
|
<li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li>
|
|
<li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li>
|
|
<li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="container" class="super-list variable-sizes clearfix">
|
|
|
|
|
|
|
|
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
|
<p class="number">12</p>
|
|
<h3 class="symbol">Mg</h3>
|
|
<h2 class="name">Magnesium</h2>
|
|
<p class="weight">24.305</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element actinoid metal inner-transition " data-symbol="U" data-category="actinoid">
|
|
<p class="number">92</p>
|
|
<h3 class="symbol">U</h3>
|
|
<h2 class="name">Uranium</h2>
|
|
<p class="weight">238.02891</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element lanthanoid metal inner-transition " data-symbol="Gd" data-category="lanthanoid">
|
|
<p class="number">64</p>
|
|
<h3 class="symbol">Gd</h3>
|
|
<h2 class="name">Gadolinium</h2>
|
|
<p class="weight">157.25</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element transition metal " data-symbol="Y" data-category="transition">
|
|
<p class="number">39</p>
|
|
<h3 class="symbol">Y</h3>
|
|
<h2 class="name">Yttrium</h2>
|
|
<p class="weight">88.90585</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
|
<p class="number">5</p>
|
|
<h3 class="symbol">B</h3>
|
|
<h2 class="name">Boron</h2>
|
|
<p class="weight">10.811</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element transition metal " data-symbol="Fe" data-category="transition">
|
|
<p class="number">26</p>
|
|
<h3 class="symbol">Fe</h3>
|
|
<h2 class="name">Iron</h2>
|
|
<p class="weight">55.845</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element actinoid metal inner-transition " data-symbol="Am" data-category="actinoid">
|
|
<p class="number">95</p>
|
|
<h3 class="symbol">Am</h3>
|
|
<h2 class="name">Americium</h2>
|
|
<p class="weight">(243)</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element transition metal " data-symbol="Zn" data-category="transition">
|
|
<p class="number">30</p>
|
|
<h3 class="symbol">Zn</h3>
|
|
<h2 class="name">Zinc</h2>
|
|
<p class="weight">65.38</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element lanthanoid metal inner-transition " data-symbol="Pm" data-category="lanthanoid">
|
|
<p class="number">61</p>
|
|
<h3 class="symbol">Pm</h3>
|
|
<h2 class="name">Promethium</h2>
|
|
<p class="weight">(145)</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element post-transition metal " data-symbol="In" data-category="post-transition">
|
|
<p class="number">49</p>
|
|
<h3 class="symbol">In</h3>
|
|
<h2 class="name">Indium</h2>
|
|
<p class="weight">114.818</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element metalloid " data-symbol="As" data-category="metalloid">
|
|
<p class="number">33</p>
|
|
<h3 class="symbol">As</h3>
|
|
<h2 class="name">Arsenic</h2>
|
|
<p class="weight">74.9216</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element lanthanoid metal inner-transition " data-symbol="Er" data-category="lanthanoid">
|
|
<p class="number">68</p>
|
|
<h3 class="symbol">Er</h3>
|
|
<h2 class="name">Erbium</h2>
|
|
<p class="weight">167.259</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element other nonmetal " data-symbol="Se" data-category="other">
|
|
<p class="number">34</p>
|
|
<h3 class="symbol">Se</h3>
|
|
<h2 class="name">Selenium</h2>
|
|
<p class="weight">78.96</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element alkaline-earth metal " data-symbol="Sr" data-category="alkaline-earth">
|
|
<p class="number">38</p>
|
|
<h3 class="symbol">Sr</h3>
|
|
<h2 class="name">Strontium</h2>
|
|
<p class="weight">87.62</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element transition metal " data-symbol="Zr" data-category="transition">
|
|
<p class="number">40</p>
|
|
<h3 class="symbol">Zr</h3>
|
|
<h2 class="name">Zirconium</h2>
|
|
<p class="weight">91.224</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element halogen nonmetal " data-symbol="At" data-category="halogen">
|
|
<p class="number">85</p>
|
|
<h3 class="symbol">At</h3>
|
|
<h2 class="name">Astatine</h2>
|
|
<p class="weight">(210)</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element transition metal " data-symbol="Nb" data-category="transition">
|
|
<p class="number">41</p>
|
|
<h3 class="symbol">Nb</h3>
|
|
<h2 class="name">Niobium</h2>
|
|
<p class="weight">92.90638</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
|
<p class="number">8</p>
|
|
<h3 class="symbol">O</h3>
|
|
<h2 class="name">Oxygen</h2>
|
|
<p class="weight">15.9994</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element actinoid metal inner-transition " data-symbol="Bk" data-category="actinoid">
|
|
<p class="number">97</p>
|
|
<h3 class="symbol">Bk</h3>
|
|
<h2 class="name">Berkelium</h2>
|
|
<p class="weight">(247)</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
|
<p class="number">9</p>
|
|
<h3 class="symbol">F</h3>
|
|
<h2 class="name">Fluorine</h2>
|
|
<p class="weight">18.9984032</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element actinoid metal inner-transition " data-symbol="Cf" data-category="actinoid">
|
|
<p class="number">98</p>
|
|
<h3 class="symbol">Cf</h3>
|
|
<h2 class="name">Californium</h2>
|
|
<p class="weight">(251)</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
|
<p class="number">10</p>
|
|
<h3 class="symbol">Ne</h3>
|
|
<h2 class="name">Neon</h2>
|
|
<p class="weight">20.1797</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
|
<p class="number">15</p>
|
|
<h3 class="symbol">P</h3>
|
|
<h2 class="name">Phosphorus</h2>
|
|
<p class="weight">30.973762</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element actinoid metal inner-transition " data-symbol="Fm" data-category="actinoid">
|
|
<p class="number">100</p>
|
|
<h3 class="symbol">Fm</h3>
|
|
<h2 class="name">Fermium</h2>
|
|
<p class="weight">(257)</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
|
<p class="number">16</p>
|
|
<h3 class="symbol">S</h3>
|
|
<h2 class="name">Sulfur</h2>
|
|
<p class="weight">32.065</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
|
<p class="number">20</p>
|
|
<h3 class="symbol">Ca</h3>
|
|
<h2 class="name">Calcium</h2>
|
|
<p class="weight">40.078</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
|
<p class="number">6</p>
|
|
<h3 class="symbol">C</h3>
|
|
<h2 class="name">Carbon</h2>
|
|
<p class="weight">12.0107</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
|
<p class="number">37</p>
|
|
<h3 class="symbol">Rb</h3>
|
|
<h2 class="name">Rubidium</h2>
|
|
<p class="weight">85.4678</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element post-transition metal " data-symbol="Uup" data-category="post-transition">
|
|
<p class="number">115</p>
|
|
<h3 class="symbol">Uup</h3>
|
|
<h2 class="name">Ununpentium</h2>
|
|
<p class="weight">(288)</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="element transition metal " data-symbol="Sc" data-category="transition">
|
|
<p class="number">21</p>
|
|
<h3 class="symbol">Sc</h3>
|
|
<h2 class="name">Scandium</h2>
|
|
<p class="weight">44.955912</p>
|
|
</div>
|
|
|
|
|
|
<div class="element feature alkali width2 height2">
|
|
<p class="number">1</p>
|
|
<h3 class="symbol">Iso</h3>
|
|
<h2 class="name">An exquisite jQuery plugin for magical layouts</h2>
|
|
</div>
|
|
|
|
<div class="element feature actinoid width2 height2">
|
|
<p class="number">31</p>
|
|
<h3 class="symbol">Dyn</h3>
|
|
<h2 class="name">Dynamic, intelligent layouts</h2>
|
|
</div>
|
|
|
|
<div class="element feature lanthanoid width2 height2">
|
|
<p class="number">27</p>
|
|
<h3 class="symbol">Srt</h3>
|
|
<h2 class="name">Re–order items with sorting</h2>
|
|
</div>
|
|
|
|
<div class="element feature metalloid width2 height2">
|
|
<p class="number">61</p>
|
|
<h3 class="symbol">Pow</h3>
|
|
<h2 class="name">Powerful methods, simple syntax</h2>
|
|
</div>
|
|
|
|
<div class="element feature alkaline-earth width2 height2">
|
|
<p class="number">11</p>
|
|
<h3 class="symbol">Flt</h3>
|
|
<h2 class="name">Reveal & hide items with filtering</h2>
|
|
</div>
|
|
|
|
<div class="element feature transition width2 height2">
|
|
<p class="number">41</p>
|
|
<h3 class="symbol">Ani</h3>
|
|
<h2 class="name">Captivating animations</h2>
|
|
</div>
|
|
|
|
<div class="element feature halogen width2 height2">
|
|
<p class="number">71</p>
|
|
<h3 class="symbol">Pro</h3>
|
|
<h2 class="name">Progressively enhanced for CSS3 transforms & transitions</h2>
|
|
</div>
|
|
|
|
<div class="element feature post-transition width2 height2">
|
|
<p class="number">51</p>
|
|
<h3 class="symbol">Any</h3>
|
|
<h2 class="name">Sort items by just about anything</h2>
|
|
</div>
|
|
|
|
<div class="link" data-number="5"><a href="jquery.isotope.min.js">Down​load jquery​.isotope​.min.js</a></div>
|
|
<div class="link" data-number="13"><a href="http://meta.metafizzy.co/files/isotope-site.zip">Down​load this project</a></div>
|
|
<div class="link away" data-number="35"><a href="http://github.com/desandro/isotope">Isotope on GitHub</a></div>
|
|
</div>
|
|
|
|
<div id="sites"></div>
|
|
|
|
|
|
<script src="js/jquery-1.6.4.min.js"></script>
|
|
<script src="jquery.isotope.min.js"></script>
|
|
<script>
|
|
$(function(){
|
|
|
|
var $container = $('#container');
|
|
|
|
$container.isotope({
|
|
masonry: {
|
|
columnWidth: 120
|
|
},
|
|
sortBy: 'number',
|
|
getSortData: {
|
|
number: function( $elem ) {
|
|
var number = $elem.hasClass('element') ?
|
|
$elem.find('.number').text() :
|
|
$elem.attr('data-number');
|
|
return parseInt( number, 10 );
|
|
},
|
|
alphabetical: function( $elem ) {
|
|
var name = $elem.find('.name'),
|
|
itemText = name.length ? name : $elem;
|
|
return itemText.text();
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
var $optionSets = $('#options .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;
|
|
});
|
|
|
|
|
|
|
|
// Sites using Isotope markup
|
|
var $sites = $('#sites'),
|
|
$sitesTitle = $('<h2 class="loading"><img src="http://i.imgur.com/qkKy8.gif" />Loading sites using Isotope</h2>'),
|
|
$sitesList = $('<ul class="clearfix"></ul>');
|
|
|
|
$sites.append( $sitesTitle ).append( $sitesList );
|
|
|
|
$sitesList.isotope({
|
|
layoutMode: 'cellsByRow',
|
|
cellsByRow: {
|
|
columnWidth: 290,
|
|
rowHeight: 400
|
|
}
|
|
});
|
|
|
|
var ajaxError = function(){
|
|
$sitesTitle.removeClass('loading').addClass('error')
|
|
.text('Could not load sites using Isotope :(');
|
|
};
|
|
|
|
// dynamically load sites using Isotope from Zootool
|
|
$.getJSON('http://zootool.com/api/users/items/?username=desandro' +
|
|
'&apikey=8b604e5d4841c2cd976241dd90d319d7' +
|
|
'&tag=bestofisotope&callback=?')
|
|
.error( ajaxError )
|
|
.success(function( data ){
|
|
|
|
// proceed only if we have data
|
|
if ( !data || !data.length ) {
|
|
ajaxError();
|
|
return;
|
|
}
|
|
var items = [],
|
|
item, datum;
|
|
|
|
for ( var i=0, len = data.length; i < len; i++ ) {
|
|
datum = data[i];
|
|
item = '<li><a href="' + datum.url + '">'
|
|
+ '<img src="' + datum.image.replace('/l.', '/m.') + '" />'
|
|
+ '<b>' + datum.title + '</b>'
|
|
+ '</a></li>';
|
|
items.push( item );
|
|
}
|
|
|
|
var $items = $( items.join('') )
|
|
.addClass('example');
|
|
|
|
// set random number for each item
|
|
$items.each(function(){
|
|
$(this).attr('data-number', ~~( Math.random() * 100 + 15 ));
|
|
});
|
|
|
|
$items.imagesLoaded(function(){
|
|
$sitesTitle.removeClass('loading').text('Sites using Isotope');
|
|
$container.append( $items );
|
|
$items.each(function(){
|
|
var $this = $(this),
|
|
itemHeight = Math.ceil( $this.height() / 120 ) * 120 - 10;
|
|
$this.height( itemHeight );
|
|
});
|
|
$container.isotope( 'insert', $items );
|
|
});
|
|
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
<footer>
|
|
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
|
</footer>
|
|
|
|
</section> <!-- #content -->
|
|
|
|
|
|
</body>
|
|
</html> |