Animated layouts in Liferay using Isotope JS

This article will help you to learn and how we can use isotope javascript library in our project. Isotope javascript library who developed by the David DeSandro. Isotope provides animated sorting and filtering in UI elements. It uses Masonry and packery layouts in addition to other layouts.

I found both of them before some days when i started working in one of my project and it’s so amazing, I whipped up a few demos to see for myself!

Install Isotope

For installation we need to download these isotope library from isotope website.

  • isotope.pkgd.js un-minified, or
  • isotope.pkgd.min.js minified

Package managers

  • Install with Bower: bower install isotope –save
  • Install with npm: npm install isotope-layout

Configuring Isotope

Portal_nirmal.vm

Include the Isotope .js file in your Theme.

 

After create a theme you can create a portlet with the name of isotope-layout for writing your HTML. write initialization code in your theme main.js file.

Initializing isotope with Jquery:


Initialize with Vanilla JavaScript:

Initialize in HTML:

You can initialize Isotope directly in HTML, without writing any JavaScript or Jquery. You have to just add js-isotope to the class of the container element. For adding the options you can add data-isotope-options attribute in your element.

How to use Filtering,Sorting and Layout

Using Isotope you can hide and show item elements with the filter option. Which shows the only matched items according to the filter. Here you can see how we can apply the filters on:

Selectors(Like Class and id)

jQuery selectors(if jQuery is present)

// filter .ClassName items that are NOT .transition class

$grid.isotope({ filter: ‘.ClassName:not(.transition)’ });

With Functions

UI with Buttons

Sorting

In Sorting we are using two methods getSortData() and SortBy().

For more Information: Sorting

layout

In Layout all sizing and styling of items is handled by your own CSS so when we are developing the responsive layouts then we need to set item sizes with percentages in css and also we need to change the mode of layout with masonry and set the percentage-width columnWidth with element sizing. Setting up the percentPosition option true (percentPosition: true) reduce the adjustment transitions on responsive mode.

For more Information: Layout

Leave a Reply