3.0 KiB
| title | category | layout | related |
|---|---|---|---|
| Introduction | docs | doc | etc |
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.
- Interoperabilty: features can be utilized together for a cohesive experience.
- Progressive enhancement: Isotope's engaging animations take advantage of the best CSS transition and transform features when available, but also fall back to Javascript animation for lesser browsers.
License
Commercial use requires purchase of one-time license fee per developer seat. Commercial use includes any application that makes you money. This includes portfolio sites and premium templates. Commercial licenses may be purchased at metafizzy.co.
Use in non-commercial and personal applications is 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 %}
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.
Code repository
%% This project lives on GitHub at.... %%
Acknowledgments
- Faruk Ateş and Paul Irish for Modernizr
- Louis-Rémi Babé for jQuery smartresize which is used within Isotope and for jQuery transform which clued me in to using jQuery 1.4.3's CSS hooks
- Jacek Galanciak for jQuery Quicksand, an early kernel of inspiration
- Ralph Holzmann for re-writing the jQuery Plugins/Authoring tutorial and opened my eyes to Plugin Methods pattern
- Eric Hynds for his article Using $.widget.bridge Outside of the Widget Factory which provided the architecture for the plugin
- Juriy Zaytsev aka "kangax" for getStyleProperty which is used within Isotope