CODEWITHSUNDEEP
jqueryhtmlcssjquery-isotopelightgallery
Kamalakannan
Kamalakannan

Reputation: 119

Using Isotope Filtering to list tag

I want to filter my gallery with isotope filters. I'm using Lightgallery to showcase my works and I need to categorize with isotope. It's not filtering or I've done wrong. I've used the list tag to display lightgallery images as my portfolio. There's no reference for isotope under the list tag. I'm not an expert in jQuery, so I need some experts advice.

Here's my Codepen, and the jQuery to call isotope

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

Upvotes: 2

Views: 325

Answers (1)

Macsupport
Macsupport

Reputation: 5444

Unfortunately, fitRows does not have any metric like columnWidth, which could be used for centering (according to Desandro), so it is not layout that can be easily centered without writing some code to do this separately. You need to use a layout like masonry to get items centered. The following code shows how this can work and I added a fix for your filtering. Not related to this question, but you would want to use imagesloaded.js to load images before isotope is called.

$('#gallery').isotope({
// options
itemSelector: '.galleryitem',
 percentPosition: true,
 masonry: {
 fitWidth: true
  }
  });
 $('button').on( 'click', function() {
 var filterValue = $(this).attr('data-filter');
  $('#gallery').isotope({ filter: filterValue });
  });

Upvotes: 0

Related Questions