Currently responsive sliders are being used in more SPA-Single Page Applications for Mobile clients to replace deep menus and and button driven designs. The idea is to get portfolio/product impressions upfront as a visitor investigates a website. But there is a whole new class of responsive grid widgets that do image sliders one better by providing:
1)animation context sizzle – you see a product in context with its peers[Carousel sliders have this];
2)more and richer options for click throughs than provided with most sliders;
3)yet delivering responsive, touch plus keyboard/mouse wheel enabled interactions.
TheOpenSourcery has already featured jQuery powered widgets like GridAccordion.js, Gridly.js, and Masonry.js . Isotope is another grid layout widget from the same developer who brought you Masonry and that deserves your attention. Like Masonry, Isotope provides for the grid layout of images but goes three steps further:
1)Isotope allows for a wide array of element layouts beyond using images;
2)Isotope provides sorting and filtering of contained elements by several user controlled properties;
3)Isotope provides more than half a dozen layout modes again controlled by the user including the Masonry layout style;
The following is an example of Isotope showing a portfolio of tutorials provided by me, theOpenSourcery.com editor in chief. Click on any of the tutorial categories to see Isotope filter and redisplay the chosen tutorial category:
[iframe src=’http://theopensourcery.ca/slideshows/isotope/presents.html’ width=’840′ height=’600′ ]
The page is live, just click on its optios to see it in action. Note what this grid widget does – it allows me to show location options, web design tutorials versus development ones, and free tutorials. And all on one page. Note also the varying size of the tutorial posters – they are are all of the same width but different heights. You can in fact use images of completely varying width and height; but the layout looks much better when the dimensions of the contained elements are either the same width or the same height or a simple multiple of one of those dimensions.
Isotope interfaces well with other jQuery widgets. Here is an example of it used with Fancybox.js on a blog displaying book selections:
Again just click on the image to go to the blog and see Isotope.js + Fancybox.js in action together. When there, click on a book and see the rich display options available. Being able to sort and/or filter Isotope’s display options is very useful for product or portfolio display. And Isotope provides a wealth of programming options, properties and methods for its dynamic control. The following set of Isotope demos show the riches available to Web developers. Click on Insert new Elements to see Isotope add new elements to the periodic table ;-}
[iframe src=’http://theopensourcery.ca/slideshows/isotope/isoadding-items.html’ width=’840′ height=’600′ ]
Needless to say if you tried the above demo, Isotope has a wealth of examples and documentation. Finally, the licensing terms are very geerous – free use for non-commercial apps, $25 for unlimited use on commercial apps. Finally in my testing I have found Isotope to work well across browsers with the IE exception ad to work well with other jQuery scripts. However, I have found some of the layout modes like packery and straightdown a little anomalous in behavior.
Summary
For users doing Splash Pages or Single Page Apps there are now a wealth of grid widgets with a wide array of features available. One of the more attractive widgets for displaying a large number of products or portfolio elements is Isotope.js. Its licensing terms are generous, the programmatic controls are rich and it plays well with other related jQuery scripts. What more could you ask for?