Использование изотопной фильтрации в списке тегов

Question

Я хочу отфильтровать мою галерею изотопными фильтрами. Я использую Lightgallery для демонстрации своих работ, и мне нужно классифицировать по изотопам. Это не фильтрация, или я сделал неправильно. Я использовал тег list для отображения изображений lightgallery в качестве своего портфолио. Там нет ссылки на изотоп под тегом списка. Я не эксперт в jQuery, поэтому мне нужен совет экспертов.

Вот мой Codepen и jQuery для вызова изотопа

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

Answer 1

К сожалению, у fitRows нет такой метрики, как columnWidth, которую можно было бы использовать для центрирования (согласно Desandro), поэтому это не макет, который можно легко центрировать без написания некоторого кода, чтобы сделать это отдельно. Вы должны использовать макет, такой как кладка, чтобы центрировать элементы. Следующий код показывает, как это может работать, и я добавил исправление для вашей фильтрации. Не относится к этому вопросу, но вы можете использовать imagesloaded.js для загрузки изображений перед вызовом изотопа.

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