13 ms·
Isotope - An exquisite jQuery plugin for magical layouts
- bkudria 16y agoFrom the creator of jQuery Masonry.
- nwjsmith 16y agoI love the ring of "An exquisite..."
- retlehs 16y ago4:28 video of desandro showing it off about a month ago http://screenr.com/vIt http://screenr.com/vIt Glad to see it finally out! Direct links to demos: http://isotope.metafizzy.co/demos/basic.html http://isotope.metafizzy.co/demos/basic.html http://isotope.metafizzy.co/demos/sorting.html http://isotope.metafizzy.co/demos/sorting.html http://isotope.metafizzy.co/demos/images.html http://isotope.metafizzy.co/demos/images.html http://isotope.metafizzy.co/demos/filtering.html http://isotope.metafizzy.co/demos/filtering.html http://isotope.metafizzy.co/demos/relayout.html http://isotope.metafizzy.co/demos/relayout.html http://isotope.metafizzy.co/demos/infinite-scroll.html http://isotope.metafizzy.co/demos/infinite-scroll.html http://isotope.metafizzy.co/demos/adding-items.html http://isotope.metafizzy.co/demos/adding-items.html http://isotope.metafizzy.co/demos/layout-modes.html http://isotope.metafizzy.co/demos/layout-modes.html http://isotope.metafizzy.co/demos/elements-partial.html http://isotope.metafizzy.co/demos/elements-partial.html http://isotope.metafizzy.co/demos/elements-complete.html http://isotope.metafizzy.co/demos/elements-complete.html
- fredleblanc 16y agoIf you go back to the homepage, he's offering the plugin for commercial use for $37. I like this idea of monetizing the use of plugins, especially ones so well-built. (He's also offering direct support for $17, another interesting idea.)
- moe 16y ago$37 is a joke. I just purchased it b̶e̶f̶o̶r̶e̶ ̶h̶e̶ ̶r̶e̶a̶l̶i̶z̶e̶s̶ ̶h̶e̶ ̶c̶o̶u̶l̶d̶ ̶c̶h̶a̶r̶g̶e̶ ̶a̶n̶ ̶o̶r̶d̶e̶r̶ ̶o̶f̶ ̶m̶a̶g̶n̶i̶t̶u̶d̶e̶ ̶m̶o̶r̶e̶ ̶f̶o̶r̶ ̶t̶h̶i̶s̶ to support further development of this gem.
- Deal-Tracker 16y agoI agree. I was happy to see such a reasonable price for this great plugin. Thanks for sharing!
- slantyyz 16y ago$37 is a joke Indeed. It's such a frictionless purchase that he'll be laughing all the way to the bank.
- shrikant 16y agoThat's a lot of hard work to substitute for the 'strikethru' tag :)
- yurifury 16y agob̶c̶d̶e̶f̶g̶h̶i̶j̶k̶l̶m̶n̶o̶p̶q̶r̶s̶t̶u̶v̶w̶x̶y̶z̶A̶B̶C̶D̶E̶F̶G̶H̶I̶J̶K̶L̶M̶N̶O̶P̶Q̶R̶S̶T̶U̶V̶W̶X̶Y̶Z̶-̶_̶!̶?̶
- fredleblanc 16y agoI'm not really commenting on the price chosen, but the choice to charge for it. I've also created a jQuery plugin or two. I released it for free and now spend a reasonable amount of time answering questions about support, implementation, etc. For some reason in my mind I had always assumed that open source type things have to be done for free: the building, the support, etc. Seeing someone doing something others helps put that in perspective. Or, in short: I wish I was smarter about it and more business-savvy.
- moe 16y agoI'm just one data point but I actually push those "donate"-buttons when I see them on plugins that make my life easier. Just keep the amount reasonable in relation to the product and don't make me jump through hoops. I.e. just link directly to paypal and if you want to ask me any questions then put that form after the checkout-process where I'm free to ignore it.
- Tycho 16y agoFantastic. With stuff like this I can see web-app interfaces surpassing (Mac) desktop applications. You might argue they already have, visually, but here the responsiveness is particularly impressive while the complexity is ramped up a bit.
- JonnieCache 16y agoVery nice! It's a more up to date version of http://razorjack.net/quicksand/ http://razorjack.net/quicksand/
- Deal-Tracker 16y agoAlso very helpful. This one seems to have some different features regarding hiding/showing elements. Great stuff!
- infocaptor 16y agoreally cool. Developing web apps is becoming like a no-brainer. Who builds for desktop when you can create the same responsiveness in a web app.
- moe 16y agoBrilliant.
- NathanKP 16y agoIsotope is fairly nice, but it is still missing fluid width on the layout elements. In other words, although it does respond fairly well to horizontal resizing of the browser, it still doesn't do a good job of dynamically adjusting the width of elements horizontally while at the same time stacking them vertically. I made some custom modifications on the original jQuery masonry plugin to get the effect I needed for my upcoming web app. You can preview it at http://test.bookflavor.com http://test.bookflavor.com (This is an in-development sneak preview so don't expect everything to work perfectly, but you will be able to preview my personal modification of the jQuery masonry plugin.)
- allenp 16y agoWow I'm really impressed with the layout and how clean it all is.
- NathanKP 16y agoThanks allenp. I hope to finish a few last features and get it released soon, but I'm at a bit of a low point right now, and finding it hard to finish a few final details with my attention diverted towards other paying jobs and issues in my life.
- superamit 16y agoHope you do, and that you release the mods. Really sweet job!
- jeisenberg 16y agoThis site looks great. Seriously, well done.
- NathanKP 16y agoThanks. I'm glad you like it. I have been feeling quite depressed of late, and a little demotivated about the site, so your positive feedback means a lot to me, and boosts me to get back to work and finish those last few features that are needed.
- chewbranca 16y agoThis looks interesting. I've been using his masonry plugin for quite a while now and its worked out very well. Excited to see that masonry appears to hook into isotope as well.
- krosaen 16y agovery cool. for those interested, a similar plugin is jquery quicksand http://razorjack.net/quicksand http://razorjack.net/quicksand
- sfphotoarts 16y agoI hate to make such a banal comment, but when I see things like this I cannot wait to redesign my website and use this ultra-cool technologies. After programming for 25 years I am grateful to this plugin and the developer(s) for the excitement that playing with the demo just gave me. Buried under all those years of coding standards this rekindled some of the feelings from the kid in me that would eagerly look forward to the next issue of E.T.I. http://en.wikipedia.org/wiki/Electronics_Today_International]E.T.I http://en.wikipedia.org/wiki/Electronics_Today_International....
- wdewind 16y agoThis seems like a neat plugin, but I don't understand all the mega excitement. What am I missing, why is this so earth shattering (read the other comments in this thread)? What is justifying people saying $37 is a "frictionless" price? What are you planning to do that makes you so excited by this?
- JonnieCache 16y agoI think its a combination of the obvious usefulness of this code, combined with the impeccable execution and presentation, combined with its effective employment of bleeding edge technologies. It's basically a "perfect storm" of frontend library awesomeness.
- wdewind 16y agoI honestly can't tell if you are being serious or not. If you are: expand on "obvious usefulness." If you aren't, congrats on telling a joke on HN and still getting upvoted.
- JonnieCache 16y agoErm... for sorting and filtering data in a way that implicitly describes the transformations in the presented dataset caused by said sorting/filtering through the animation effects. Information density++ I honestly see this as obvious. I'm not trying to be funny. And I can't work out if you don't think this is obvious, or you don't agree that this would be useful. Just imagine it on an ecommerce page: http://www.google.co.uk/products?q=shoes&hl=en&show=li&lnk=showgrid http://www.google.co.uk/products?q=shoes&hl=en&show=... Also imagine using it to fine tune an optimisation problem: you adjust a series of sliders that define the relative priorities you place on certain properties of the items in the dataset, it then does a weighted sort. You can see directly how the changes on the sliders affect the ranking of the items. If you didn't have the animation it would not be easy to see which items had risen and which fallen. You would have to compare your memory of the order before the change with what you're looking at. This is cognitively very difficult, and it would lead to you toggling the value back and forth endlessly and comparing the order. Basically any stat or inventory interface in a game would benefit from this. Or any interface where the task is solving an optimisation problem really. Not all whizzy effects are gimmicks to be sneered at from the terminal. Don't throw the UX baby out with the eye candy bathwater. EDIT: Another example - when toggling between different properties to sort the dataset by, the amount and speed of the animation describes the correlation of the two properties, without requiring you to parse any text. Animation is just another way to impart information that doesn't require reading, alongside color, size, and other spatial/physical properties.
- anigbrowl 16y agoBeautiful. The individual demos are also very impressive. The only thing I didn't really get was the variable sizes option, where the sizes seemed kind of arbitrary (for example on the elements demo, I expected it to be proportional to something, such as the abundance of the element). Small note, on Chrome (d10) the option highlights on the Elements Complete demo are broken. Buttons still work but the highlight doesn't update correctly.
- cemregr 16y agoDave DeSandro is a web development genius.
- netmau5 16y agoVery very cool and I even have something to use it on!
- neovive 16y agoVery interesting library. I see some interesting use cases for photos and media browsing. It would be interesting to hear some other suggested use cases where this plugin can be applied over existing solutions.
- MaxGfeller 16y agoLooks awesome, trying to find something where i can use that.
- crizCraig 16y agoI love how it works with the page zoom.
- Geee 16y agoHow does it run on lower spec computers or devices like iPad? I'm just wondering where the line should be drawn when considering the website performance/user experience.
- Tycho 16y agoWorks fine on iPad. In fact the graphics in the demos make me think this would be perfect for recreating the Star Trek 'tablets'.
- prawn 16y agoMy laptop is 6-7 years old and it isn't overly slick for me, but not so bad that it'd be a huge concern. Definitely worth testing depending on how many items you're looking to incorporate though.
- jp_sc 16y agoNice. I did something very similar, as an experiment, even before jQuery Masonry, but never released it. I should've known better.
- KevBurnsJr 16y agoThe buttons on the site are broken. The click events are all waiting for page load which is taking 20 seconds due to an unrelated request timeout for a javascript resource from a different domain. Probably some sort of analytics. Same thing has been caused by ads on pastie.org lately http://pastie.org/1538368 http://pastie.org/1538368 Register your click events BEFORE page load, kiddies. Especially if you have blocking embedded links to resources that are not in your control.
- asdfadjoin 16y agoThis is Sridhar
- lucasr 16y agoPretty nice plugin. The transitions look a bit choppy on Firefox 3.6. Very smooth on Chrome.
- battlehorse 16y agoVery interesting library, I'd like to suggest another similar alternative : Rhizosphere, http://site.rhizospherejs.com http://site.rhizospherejs.com (demos at http://www.rhizospherejs.com http://www.rhizospherejs.com ). Compared with Isotope, I think it has some extra features, but also is still missing something.