Как создать адаптивную галерею для интернет-магазина

В этой статье вы узнаете, как создать адаптивную галерею с помощью простенького JavaScript-фреймворка Stimulus для HTML-страницы вашего будущего интернет-магазина. Stimulus — это мощная альтернатива SPA, которая позволяет разработчикам воплощать в жизнь их задумки по созданию веб-приложений.

Stimulus Components — это проект с открытым исходным кодом, в котором размещена коллекция настраиваемых компонентов для типичного поведения JavaScript. Один компонент поможет создать в вашем будущем интернет-магазине многофункциональную адаптивную галерею. Причем никакого пользовательского JavaScript писать вообще не нужно. Загляните на lightgallery.js за вдохновением: быть может, у вас появятся новые идеи для собственной галереи.

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

Что мы будем создавать?

Адаптивную галерею для интернет-магазина по продаже подушек.

Прежде чем начинать…

Убедитесь, что Stimulus у вас установлен. Приготовьте файл package.json или запустите yarn why stimulus. Если Stimulus пока не установлен, следуйте инструкциям в документации.

Пользователям Rails рекомендую посмотреть GoRails episode. А если у вас есть webpack, просто запустите

rails webpacker:install:stimulus.

Создаем свою адаптивную галерею

1. Установим пакет Запустите yarn add stimulus-lightbox в терминале.

2. Добавим библиотеку Lightbox от Stimulus

   // app/javascript/controllers/index.js
   import { Application } from "stimulus"
   import Lightbox from "stimulus-lightbox"
   const application = Application.start()
   application.register("lightbox", Lightbox)
   

3. Импортируем таблицы стилей ``` // В application.js (например) import “lightgallery.js/dist/css/lightgallery.min.css”

// Или в файле application.scss @import “lightgallery.js/src/sass/lightgallery”

4. Добавим базовый HTML-шаблон
Библиотеке lightgallery.js нужен атрибут data-scr. Он не предоставляется image tag (тегом изображения)
rails по умолчанию. Поэтому добавьте атрибут data-src в HTML вручную.
```html
<div data-controller="lightbox" class="images">
 <%= image_tag "pillow1",  data: { src: "../assets/pillow1.jpg" } %>
 <%= image_tag "pillow2",  data: { src: "../assets/pillow2.jpg" } %>
 <%= image_tag "pillow3",  data: { src: "../assets/pillow3.jpg" } %>
 <%= image_tag "pillow4",  data: { src: "../assets/pillow4.jpg" } %>
</div>

1. Добавим изображениям базовое стилевое оформление

    .images {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    }
   img {
    height: 200px;
    width: 200px;
    margin: 10px;
    cursor: pointer;
    }
   

2. Добавим текст Сделайте адаптивную галерею более информативной, добавив в нижней части каждого изображения небольшое текстовое описание. ```html