Практика: простая галерея на jQuery

Оглавление

Цель: создать простую и функциональную галерею изображений с миниатюрами и основным окном просмотра, используя jQuery и базовые эффекты.

1. Вёрстка галереи

<div id="gallery">
  <div id="main-image">
    <img src="images/photo1_large.jpg" alt="Главное изображение">
  </div>
  <div id="thumbnails">
    <img src="images/photo1_thumb.jpg" data-large="images/photo1_large.jpg" alt="Фото 1" class="thumb active">
    <img src="images/photo2_thumb.jpg" data-large="images/photo2_large.jpg" alt="Фото 2" class="thumb">
    <img src="images/photo3_thumb.jpg" data-large="images/photo3_large.jpg" alt="Фото 3" class="thumb">
  </div>
</div>

2. CSS для базового стиля

#gallery {
  width: 600px;
  margin: 20px auto;
}
#main-image img {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
}
#thumbnails {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
.thumb {
  width: 100px;
  cursor: pointer;
  border: 2px solid transparent;
}
.thumb.active {
  border-color: #007bff;
}

3. Скрипт jQuery для смены главного изображения

$(function() {
  $('#thumbnails').on('click', '.thumb', function() {
    if ($(this).hasClass('active')) return;

    // Убираем активный класс у всех миниатюр
    $('.thumb').removeClass('active');

    // Добавляем активный класс к текущему
    $(this).addClass('active');

    // Получаем ссылку на большое изображение
    let largeSrc = $(this).data('large');

    // Меняем главное изображение с плавным эффектом
    $('#main-image img').fadeOut(200, function() {
      $(this).attr('src', largeSrc).fadeIn(200);
    });
  });
});

4. Дополнительно: автоматическая прокрутка (слайдер)

$(function() {
  let thumbs = $('#thumbnails .thumb');
  let currentIndex = 0;
  let total = thumbs.length;

  function showImage(index) {
    thumbs.eq(index).click();
  }

  setInterval(function() {
    currentIndex = (currentIndex + 1) % total;
    showImage(currentIndex);
  }, 4000); // каждые 4 секунды меняем изображение
});

5. Итог

Мы создали простую галерею с основным окном и миниатюрами.
При клике на миниатюру меняется большое изображение с плавным эффектом.
Добавлена автопрокрутка изображений.

6. Задание для закрепления

Добавь кнопки «вперед» и «назад» для ручной навигации.
Реализуй остановку автопрокрутки при наведении мыши на галерею.
Добавь индикатор текущего изображения (например, цифры 1/3).

Jquery

+ Читать