325 lines
17 KiB
HTML
325 lines
17 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<title>Introduction · Isotope Docs</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="docs ">
|
|
|
|
<nav id="site-nav">
|
|
<h1><a href="../index.html">Isotope</a></h1>
|
|
|
|
<h2>Docs</h2>
|
|
|
|
<ul>
|
|
|
|
|
|
<li class="current"><a href="#content">Introduction</a>
|
|
<ul class="toc">
|
|
|
|
<li><a href="#features">Features</a></li>
|
|
|
|
<li><a href="#licensing">Licensing</a></li>
|
|
|
|
<li><a href="#getting_started">Getting started</a></li>
|
|
|
|
<li><a href="#code_repository">Code repository</a></li>
|
|
|
|
<li><a href="#moderation">A word about moderation</a></li>
|
|
|
|
<li><a href="#acknowledgments">Acknowledgments</a></li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<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">
|
|
|
|
<h1>Introduction</h1>
|
|
|
|
|
|
<p class='tagline'>Isotope: An exquisite jQuery plugin for magical layouts</p>
|
|
<h2 id='features'>Features</h2>
|
|
|
|
<ul>
|
|
<li><a href='layout-modes.html'><strong>Layout modes</strong></a>: Intelligent, dynamic layouts that can’t be achieved with CSS alone.</li>
|
|
|
|
<li><a href='filtering.html'><strong>Filtering</strong></a>: Hide and reveal item elements easily with jQuery selectors.</li>
|
|
|
|
<li><a href='sorting.html'><strong>Sorting</strong></a>: Re-order item elements with sorting. Sorting data can be extracted from just about anything.</li>
|
|
|
|
<li><strong>Interoperability</strong>: features can be utilized together for a cohesive experience.</li>
|
|
|
|
<li><strong>Progressive enhancement</strong>: Isotope’s <a href='animating.html'>animation engine</a> takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.</li>
|
|
</ul>
|
|
|
|
<h2 id='licensing'>Licensing</h2>
|
|
<p id='commercial'>
|
|
<strong>Commercial use of Isotope requires purchase of one-time license fee per developer seat.</strong> Commercial use includes any application that makes you money — portfolio sites, premium templates, etc. Commercial licenses may be purchased at <a href='http://metafizzy.co/#isotope-license'>metafizzy.co</a>.
|
|
</p>
|
|
<p>Use in non-commercial and personal applications is free.</p>
|
|
|
|
<h2 id='getting_started'>Getting started</h2>
|
|
|
|
<p>Isotope requires jQuery 1.4.3 and greater.</p>
|
|
|
|
<h3 id='markup'>Markup</h3>
|
|
|
|
<p>Isotope works on a container element with a group of similar child items.</p>
|
|
<div class='highlight'><pre><code class='html'><span class='nt'><div</span> <span class='na'>id=</span><span class='s'>"container"</span><span class='nt'>></span>
|
|
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"item"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
|
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"item"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
|
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"item"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
|
...
|
|
<span class='nt'></div></span>
|
|
</code></pre>
|
|
</div>
|
|
<h3 id='script'>Script</h3>
|
|
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
|
<span class='c1'>// options</span>
|
|
<span class='nx'>itemSelector</span> <span class='o'>:</span> <span class='s1'>'.item'</span><span class='p'>,</span>
|
|
<span class='nx'>layoutMode</span> <span class='o'>:</span> <span class='s1'>'fitRows'</span>
|
|
<span class='p'>});</span>
|
|
</code></pre>
|
|
</div>
|
|
<p><a href='../demos/basic.html'><strong>See Demo: Basic</strong></a></p>
|
|
|
|
<p>There are a number of <a href='options.html'>options</a> you can specify. Within the options is where you can <a href='layout-modes.html'>set the layout mode</a>, <a href='filtering.html'>filter items</a>, and <a href='sorting.html'>sort items</a>.</p>
|
|
|
|
<p>Additionally you can specify a callback after the options object. This function will be triggered after the animation has completed.</p>
|
|
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span> <span class='nx'>filter</span><span class='o'>:</span> <span class='s1'>'.my-selector'</span> <span class='p'>},</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>$items</span> <span class='p'>)</span> <span class='p'>{</span>
|
|
<span class='kd'>var</span> <span class='nx'>id</span> <span class='o'>=</span> <span class='k'>this</span><span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>'id'</span><span class='p'>),</span>
|
|
<span class='nx'>len</span> <span class='o'>=</span> <span class='nx'>$items</span><span class='p'>.</span><span class='nx'>length</span><span class='p'>;</span>
|
|
<span class='nx'>console</span><span class='p'>.</span><span class='nx'>log</span><span class='p'>(</span> <span class='s1'>'Isotope has filtered for '</span> <span class='o'>+</span> <span class='nx'>len</span> <span class='o'>+</span> <span class='s1'>' items in #'</span> <span class='o'>+</span> <span class='nx'>id</span> <span class='p'>);</span>
|
|
<span class='p'>});</span>
|
|
</code></pre>
|
|
</div>
|
|
<p>Within this callback <code><span class='k'>this</span></code> refers to the container, and <code>$items</code> refers to the item elements. Both of these are jQuery objects and do <em>not</em> need to be put in jQuery wrappers.</p>
|
|
|
|
<h3 id='css'>CSS</h3>
|
|
|
|
<p>Add these styles to your CSS for <a href='filtering.html'>filtering</a>, <a href='animating.html'>animation</a> with CSS transitions, and <a href='adding-items.html'>adding items</a>.</p>
|
|
<div class='highlight'><pre><code class='css'><span class='c'>/**** Isotope Filtering ****/</span>
|
|
|
|
<span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
|
<span class='k'>z-index</span><span class='o'>:</span> <span class='m'>2</span><span class='p'>;</span>
|
|
<span class='p'>}</span>
|
|
|
|
<span class='nc'>.isotope-hidden.isotope-item</span> <span class='p'>{</span>
|
|
<span class='k'>pointer</span><span class='o'>-</span><span class='n'>events</span><span class='o'>:</span> <span class='k'>none</span><span class='p'>;</span>
|
|
<span class='k'>z-index</span><span class='o'>:</span> <span class='m'>1</span><span class='p'>;</span>
|
|
<span class='p'>}</span>
|
|
|
|
<span class='c'>/**** Isotope CSS3 transitions ****/</span>
|
|
|
|
<span class='nc'>.isotope</span><span class='o'>,</span>
|
|
<span class='nc'>.isotope</span> <span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
|
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0.8s</span><span class='p'>;</span>
|
|
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0.8s</span><span class='p'>;</span>
|
|
<span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0.8s</span><span class='p'>;</span>
|
|
<span class='p'>}</span>
|
|
|
|
<span class='nc'>.isotope</span> <span class='p'>{</span>
|
|
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>height</span><span class='o'>,</span> <span class='k'>width</span><span class='p'>;</span>
|
|
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>height</span><span class='o'>,</span> <span class='k'>width</span><span class='p'>;</span>
|
|
<span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>height</span><span class='o'>,</span> <span class='k'>width</span><span class='p'>;</span>
|
|
<span class='p'>}</span>
|
|
|
|
<span class='nc'>.isotope</span> <span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
|
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
|
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
|
<span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
|
<span class='p'>}</span>
|
|
|
|
<span class='c'>/**** disabling Isotope CSS3 transitions ****/</span>
|
|
|
|
<span class='nc'>.isotope.no-transition</span><span class='o'>,</span>
|
|
<span class='nc'>.isotope.no-transition</span> <span class='nc'>.isotope-item</span><span class='o'>,</span>
|
|
<span class='nc'>.isotope</span> <span class='nc'>.isotope-item.no-transition</span> <span class='p'>{</span>
|
|
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0s</span><span class='p'>;</span>
|
|
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0s</span><span class='p'>;</span>
|
|
<span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0s</span><span class='p'>;</span>
|
|
<span class='p'>}</span>
|
|
</code></pre>
|
|
</div>
|
|
<h2 id='code_repository'>Code repository</h2>
|
|
|
|
<p>This project lives on GitHub at <a href='http://github.com/desandro/isotope'>github.com/desandro/isotope</a>. There you can grab the latest code and follow development.</p>
|
|
|
|
<h2 id='moderation'>A word about moderation</h2>
|
|
|
|
<p>Isotope enables a wealth of functionality. But just because you can take advantage of its numerous features together, doesn’t mean you necessarily should. For each each feature you implement with Isotope, consider the benefit gained by users, at the cost of another level of complexity to your interface.</p>
|
|
|
|
<h2 id='acknowledgments'>Acknowledgments</h2>
|
|
|
|
<ul>
|
|
<li><a href='http://benalman.com/'><strong>“Cowboy” Ben Alman</strong></a> for <a href='http://benalman.com/projects/jquery-bbq-plugin/'>jQuery BBQ</a> (included with docs)</li>
|
|
|
|
<li><a href='http://twitter.com/Louis_Remi'><strong>Louis-Rémi Babé</strong></a> for <a href='https://github.com/louisremi/jquery-smartresize'>jQuery smartresize</a> (used within Isotope) and for <a href='https://github.com/louisremi/jquery.transform.js'>jQuery transform</a> which clued me in to using jQuery 1.4.3’s CSS hooks</li>
|
|
|
|
<li><a href='http://razorjack.net/'><strong>Jacek Galanciak</strong></a> for <a href='http://razorjack.net/quicksand/'>jQuery Quicksand</a>, an early kernel of inspiration</li>
|
|
|
|
<li><a href='http://twitter.com/#!/ralphholzmann'><strong>Ralph Holzmann</strong></a> for re-writing the <a href='http://docs.jquery.com/Plugins/Authoring'>jQuery Plugins/Authoring tutorial</a> and opened my eyes to <a href='http://docs.jquery.com/Plugins/Authoring#Plugin_Methods'>Plugin Methods</a> pattern</li>
|
|
|
|
<li><a href='http://www.erichynds.com/'><strong>Eric Hynds</strong></a> for his article <a href='http://www.erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/'>Using $.widget.bridge Outside of the Widget Factory</a> which provided the architecture for Isotope</li>
|
|
|
|
<li><a href='http://paul-irish.com'><strong>Paul Irish</strong></a> for <a href='http://infinite-scroll.com'>Infinite Scroll</a> (included with docs), the <a href='http://gist.github.com/268257'>imagesLoaded plugin</a> (included with Isotope), and <a href='http://paulirish.com/demo/resize'>Debounced resize() plugin</a> (provided base for smartresize)</li>
|
|
|
|
<li>The <a href='http://jqueryui.com/about'><strong>jQuery UI Team</strong></a> for <a href='https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js#L113-155'>$.widget.bridge</a> (partially used within Isotope)</li>
|
|
|
|
<li>The Modernizr team for <a href='http://www.modernizr.com/'>Modernizr</a> (partially used within Isotope)</li>
|
|
|
|
<li><a href='http://perfectionkills.com'><strong>Juriy Zaytsev aka “kangax”</strong></a> for <a href='http://perfectionkills.com/feature-testing-css-properties/'>getStyleProperty</a> (used within Isotope)</li>
|
|
</ul>
|
|
|
|
<footer>
|
|
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
|
</footer>
|
|
|
|
</section> <!-- #content -->
|
|
|
|
|
|
</body>
|
|
</html> |