Как создать галерею изображений на сайте

Создание галереи изображений на сайте может быть выполнено с использованием различных инструментов и подходов. В этой статье мы рассмотрим два популярных метода: с использованием HTML/CSS и с применением библиотеки JavaScript. Давайте начнем! 🚀

Метод 1: HTML и CSS

Шаг 1: Разметка

Сначала создадим разметку для галереи с помощью тегов HTML. В данном примере мы будем использовать теги div и img:

<div class="gallery">
  <img src="image1.jpg" alt="описание изображения 1">
  <img src="image2.jpg" alt="описание изображения 2">
  <img src="image3.jpg" alt="описание изображения 3">
  <!-- ...добавьте больше изображений по аналогии -->
</div>

Шаг 2: Стилизация

Теперь добавим немного стилей с помощью CSS, чтобы сделать галерею более красивой и функциональной:

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery img {
  width: 100px;
  height: auto;
  cursor: pointer;
}

В данном примере мы используем свойства flex, flex-wrap и gap для создания адаптивной сетки изображений. Свойство cursor указывает, что изображения являются интерактивными элементами.

Веб-разработчик: новая работа через 9 месяцев

Получится, даже если у вас нет опыта в IT

Получить программу

Метод 2: JavaScript-библиотека

Если вы хотите добавить дополнительные функции, такие как просмотр изображений в модальном окне, вы можете использовать готовые JavaScript-библиотеки. Одна из таких библиотек — Lightbox.

Шаг 1: Подключение библиотеки

Подключите файлы стилей и скриптов Lightbox к вашему проекту:

<link rel="stylesheet" href="path/to/lightbox.min.css">
<script src="path/to/lightbox.min.js"></script>

Шаг 2: Разметка

Создайте разметку галереи аналогично первому методу, но добавьте атрибут data-lightbox и ссылку на большое изображение для каждого элемента:

<div class="gallery">
  <a href="large-image1.jpg" data-lightbox="my-gallery">
    <img src="image1.jpg" alt="описание изображения 1">
  </a>
  <a href="large-image2.jpg" data-lightbox="my-gallery">
    <img src="image2.jpg" alt="описание изображения 2">
  </a>
  <a href="large-image3.jpg" data-lightbox="my-gallery">
    <img src="image3.jpg" alt="описание изображения 3">
  </a>
  <!-- ...добавьте больше изображений по аналогии -->
</div>

Шаг 3: Стилизация

Добавьте стили CSS из первого метода или свои собственные стили для кастомизации галереи.

Теперь у вас есть галерея изображений с возможностью просмотра в модальном окне! 🎉

В заключение, создание галереи изображений на сайте может быть выполнено разными способами, в зависимости от ваших потребностей и предпочтений. Экспериментируйте с разными инструментами и подходами, чтобы найти тот, который подходит вам больше всего. Удачи вам в обучении веб-разработке! 🤖