playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
573 Commits
3 Branches
54 Tags
2.2 MiB
 
 
 
Tree: 9f2147aaab
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '9f2147aaab'
${ noResults }
isotope/_posts/docs/2010-12-01-introduction.mdown

6.9 KiB
Raw Blame History

title category layout toc
Introduction docs default {title Features} {anchor features}] [{title Licensing} {anchor licensing}] [{title Getting started} {anchor getting_started}] [{title Code repository} {anchor code_repository}] [{title A word about moderation} {anchor moderation}] [{title Acknowledgments} {anchor acknowledgments}

Isotope: An exquisite jQuery plugin for magical layouts

Features

  • Layout modes: Intelligent, dynamic layouts that can't be achieved with CSS alone.
  • Filtering: Hide and reveal item elements easily with jQuery selectors.
  • Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything.
  • Interoperability: features can be utilized together for a cohesive experience.
  • Progressive enhancement: Isotope's animation engine 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.

Commercial Licensing

Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. Read more about Isotope commercial licensing.

{% include developer-buy-button.html %} {% include org-buy-button.html %}

Purchasing accepts most credit cards and takes seconds. Once purchased, you'll receive a commercial license PDF and you will be all set to use Isotope in your commercial applications.

For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the MIT License. You may use Isotope for free.

Getting started

Isotope requires jQuery 1.4.3 and greater.

Markup

Isotope works on a container element with a group of similar child items.

{% highlight html %}

...
...
...
...

{% endhighlight %}

Script

{% highlight javascript %}

$('#container').isotope({ // options itemSelector : '.item', layoutMode : 'fitRows' });

{% endhighlight %}

See Demo: Basic

There are a number of options you can specify. Within the options is where you can set the layout mode, filter items, and sort items.

Additionally you can specify a callback after the options object. This function will be triggered after the animation has completed.

{% highlight javascript %}

$('#container').isotope({ filter: '.my-selector' }, function( $items ) { var id = this.attr('id'), len = $items.length; console.log( 'Isotope has filtered for ' + len + ' items in #' + id ); });

{% endhighlight %}

Within this callback this refers to the container, and $items refers to the item elements. Both of these are jQuery objects and do not need to be put in jQuery wrappers.

CSS

Add these styles to your CSS for filtering, animation with CSS transitions, and adding items.

{% highlight css %}

/**** Isotope Filtering ****/

.isotope-item { z-index: 2; }

.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }

/**** Isotope CSS3 transitions ****/

.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; }

.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }

.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; }

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }

{% endhighlight %}

Code repository

This project lives on GitHub at github.com/desandro/isotope. There you can grab the latest code and follow development.

A word about moderation {: #moderation}

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.

Acknowledgments