Zoom и лайтбоксы

MDX предоставляет уникальную возможность комбинировать Markdown и JSX, что позволяет создавать интерактивные компоненты прямо в документации или веб-приложении. Одной из важных задач при работе с визуальными медиа является организация масштабирования изображений (zoom) и использование лайтбоксов для удобного просмотра контента.

Подключение библиотеки для Zoom

Для реализации увеличения изображений можно использовать популярные библиотеки, например react-medium-image-zoom или react-inner-image-zoom. Эти библиотеки обеспечивают плавное масштабирование изображений и интегрируются с JSX-компонентами.

Пример использования react-medium-image-zoom в MDX:

import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'


  Пример изображения

Ключевые моменты:

  • Импорт CSS стилей обязателен для корректного отображения анимации.
  • Компонент оборачивает обычный элемент.
  • Размер исходного изображения можно задавать через inline-стили или CSS-классы.

Использование лайтбоксов

Лайтбоксы позволяют открывать медиа-контент в модальном окне, создавая эффект фокусировки на изображении или галерее. Одной из часто используемых библиотек является react-image-lightbox.

Пример интеграции:

import { useState } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';

const images = [
  '/images/photo1.jpg',
  '/images/photo2.jpg',
  '/images/photo3.jpg'
];

function Gallery() {
  const [isOpen, setIsOpen] = useState(false);
  const [photoIndex, setPhotoIndex] = useState(0);

  return (
    <>
      {images.map((src, index) => (
        {`Изображение {
            setPhotoIndex(index);
            setIsOpen(true);
          }}
        />
      ))}

      {isOpen && (
         setIsOpen(false)}
          onMovePrevRequ est={() =>
            setPhotoIndex((photoIndex + images.length - 1) % images.length)
          }
          onMoveNextRequ est={() =>
            setPhotoIndex((photoIndex + 1) % images.length)
          }
        />
      )}
    
  );
}

Особенности:

  • Поддержка навигации между изображениями через nextSrc и prevSrc.
  • Управление состоянием компонента с помощью useState.
  • Возможность кастомизации кнопок, анимаций и стилей через props.

Комбинирование Zoom и лайтбокса

Для создания более интерактивного интерфейса можно комбинировать обе технологии: предварительный zoom при наведении и открытие лайтбокса при клике.

import Zoom from 'react-medium-image-zoom';
import Lightbox from 'react-image-lightbox';
import { useState } from 'react';
import 'react-medium-image-zoom/dist/styles.css';
import 'react-image-lightbox/style.css';

function InteractiveGallery({ images }) {
  const [isOpen, setIsOpen] = useState(false);
  const [photoIndex, setPhotoIndex] = useState(0);

  return (
    <>
      {images.map((src, index) => (
        
          {`Изображение {
              setPhotoIndex(index);
              setIsOpen(true);
            }}
          />
        
      ))}

      {isOpen && (
         setIsOpen(false)}
          onMovePrevRequ est={() =>
            setPhotoIndex((photoIndex + images.length - 1) % images.length)
          }
          onMoveNextRequ est={() =>
            setPhotoIndex((photoIndex + 1) % images.length)
          }
        />
      )}
    
  );
}

Преимущества комбинированного подхода:

  • Пользователь получает предварительный просмотр изображения при наведении.
  • Лайтбокс обеспечивает масштабирование и навигацию без потери контекста страницы.
  • Гибкость настройки и возможность расширения галереи с динамическими данными.

Настройка стилей и адаптивности

Для корректного отображения на различных устройствах рекомендуется использовать CSS-медиа-запросы и стили с процентными ширинами:

img {
  max-width: 100%;
  height: auto;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Рекомендации по стилям:

  • Минимизировать фиксированные размеры изображений, чтобы лайтбокс корректно масштабировал контент.
  • Использовать классы для управления отступами и выравниванием галереи.
  • Анимации Zoom и Lightbox должны быть плавными и не блокировать взаимодействие с остальной страницей.
Оглавление