Как сделать Isotope gallery 3 в ряд?

Isotope является мощным и гибким плагином для jQuery, который позволяет создавать динамические и адаптивные сетки для веб-сайтов. Для того чтобы создать галерею изображений Isotope со 3 изображениями в ряд, вам потребуется использовать HTML, CSS и JavaScript.

Начнем с создания разметки HTML для галереи. Вам понадобится контейнер, в котором будут располагаться изображения. Также, каждое изображение должно быть обернуто в элемент с классом grid-item. Пример разметки может выглядеть следующим образом:

<div class="gallery">
  <div class="grid-item"><img src="image1.jpg"></div>
  <div class="grid-item"><img src="image2.jpg"></div>
  <div class="grid-item"><img src="image3.jpg"></div>
  <div class="grid-item"><img src="image4.jpg"></div>
  <!-- и так далее -->
</div>

Следующим шагом является создание стилей CSS для нашей галереи. Нашей главной целью здесь будет задать ширину и высоту элементов grid-item и выровнять их в 3 ряда. Пример стилей может выглядеть следующим образом:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Три колонки */
  grid-gap: 10px; /* Отступ между элементами */
}

.grid-item {
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* Задаем соотношение сторон для изображений */
  position: relative;
}

.grid-item img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Заполнение изображения в контейнере */
}

Теперь, когда у нас есть разметка и стили, мы можем использовать Isotope для инициализации галереи и применения всех необходимых эффектов.

1. Подключите библиотеку Isotope и jQuery к вашему проекту:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

2. Инициализируйте Isotope и примените все необходимые настройки к вашей галерее:

$(document).ready(function() {
  // Инициализация Isotope
  var $grid = $('.gallery').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows' // Выравнивание в рядах
  });

  // Переключение фильтров (если требуется)
  $('.filter-button-group').on('click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
  });

  // Обновить галерею после загрузки изображений (если требуется)
  $grid.imagesLoaded().progress(function() {
    $grid.isotope('layout');
  });
});

Теперь ваша галерея Isotope должна быть инициализирована и отображаться с 3 изображениями в ряд. Вы можете добавить больше изображений в разметку HTML и Isotope автоматически адаптирует их в нужное количество рядов.

Иногда может потребоваться настройка Isotope для учета дополнительных параметров, таких как фильтрация, сортировка или анимации. В таком случае вы можете обратиться к документации Isotope и изучить доступные опции и методы для настройки вашей галереи более подробно.