Среда, 29 марта 2023 23:48

Добавляем лайтбокс для галереи изображений на Reactjs

Оцените материал
(4 голосов)

Возможно, вы со мной не согласитесь (без проблем, предлагайте свой кейс). Но, на мой взгляд, когда у вас уже есть готовая галерея на реакте, и вам нужно всего только прикрутить к ней лайтбокс по клику на изображении - Lightbox2 одно из самых быстрых и простых решений.

 

Dev banner 1

 

Причем, несмотря на то, что jQuery, требуемый Lightbox2 в качестве зависимости - в контексте реакта, очень возможно, является антипаттерном. Здесь уже только ваш выбор (еще раз, пишите свой вариант в комментах). А я лишь покажу далее, как легко реализуется сказанное. Живую демку с рабочим кодом можно увидеть в гитхабе, найдя репо с названием The-Cat-API-React-App:

 

Увидеть на гитхабе.

 

Устанавливаем Lightbox2:

 

npm i lightbox2

 

, далее, в вашем компоненте:

 

import "lightbox2/dist/js/lightbox-plus-jquery";
import "lightbox2/dist/css/lightbox.css";

 

Первый импорт, помимо лайтбокса, содержит еще и jQuery (разработчик позаботился о наших с вами удобствах), что избавляет от необходимости делать что-либо еще. Разве что - совсем немного подправить HTML:

 

-                <img
-                  src={item.image.url}
-                  alt={item.name}
-                  title={item.name}
-                  className="collection"
-                />
+                <a
+                  href={item.image.url}
+                  data-lightbox="Gallery1"
+                  data-title="Gallery1"
+                >
+                  <img
+                    src={item.image.url}
+                    alt={item.name}
+                    title={item.name}
+                    className="collection"
+                  />
+                </a>

 

И на этом все.

Последнее изменениеЧетверг, 30 марта 2023 00:11

Оставить комментарий

Добавьте ваш комментарий

Разработка web-проектов

Комментарии в блоге

ReactJS