Пользовательская Lightbox — современный режим, жесты свайпа, полноэкранный режим и многое другое

Привет :wave:

Этот компонент темы модифицирует модальное окно Magnific (лайтбокс/галерея), чтобы сделать его более удобным для пользователя, особенно на мобильных устройствах.


Этот компонент внесет множество изменений в стандартное модальное окно Magnific.

  • Более современный дизайн
  • Кнопка полноэкранного режима (клавиша F)
  • Кнопка показа/скрытия заголовка
  • Сенсорные жесты свайпа
    • свайп вправо — предыдущее изображение
    • свайп влево — следующее изображение
    • свайп вниз — закрыть лайтбокс

Переводы темы для изменения названий кнопок.

zoom_in_button_title: "Увеличить"
zoom_out_button_title: "Уменьшить"
close_button_title: "Закрыть (Esc)"
fullscreen_button_title: "Полноэкранный режим (F)"
toggle_title_button_title: "Переключить информацию"

Этот новый пользовательский лайтбокс вдохновлен New Discourse Lightbox Enabled on Meta - now disabled


По-прежнему хотите использовать старую версию?
Вы можете сделать это, используя ветку old-custom-lightbox.

15 лайков

Было бы здорово, если бы прокрутку можно было выполнять свайпом влево-вправо. Кроме того, отличный tc.

3 лайка

Спасибо! Да, это было бы здорово, но, к сожалению, Magnific Popup не поддерживает жесты свайпа.

4 лайка

Я обновил компонент темы и первый пост.

4 лайка

Привет :wave:

Я обновил этот компонент темы :tada:

Это обновление включает следующее:

  1. Отказ от jQuery
  2. Изменение цвета темы на чёрный при открытии лайтбокса (например, строка состояния также станет чёрной, как и фон лайтбокса)
  3. Обновление иконок до FontAwesome 6.
  4. Использование курсоров «увеличить» и «уменьшить» на изображении.

Я добавил ссылку на предпросмотр в первом сообщении. :slightly_smiling_face:

5 лайков

Очень здорово, Дон! Не могли бы вы добавить опцию, чтобы переместить стрелки, кнопку загрузки и счетчик изображений за пределы фото? На фотосайте нежелательно закрывать части снимка — мы хотим видеть фото целиком, без отвлекающих элементов. Если это невозможно, ничего страшного, спасибо!

2 лайка

Спасибо, Дэвид, я поищу решение :slightly_smiling_face:

Идея состоит в том, чтобы создать новую кнопку «Инфо» для отображения/скрытия информации об изображении, такой как загрузка, оригинал изображения, заголовок и, возможно, счётчик. :thinking:

1 лайк

Спасибо, Дон. Я думал скорее вот так:

Но также нужно вынести стрелки за пределы изображения — для этого потребуется уменьшить саму картинку, чтобы оставить отступы по краям.

Другой вариант — скрывать всю информацию, пока курсор не переместится, но не уверен, что это возможно.

2 лайка

Я почерпнул вдохновение в том, как это сочетается с новым лайтбоксом, и создал концепт :sweat_smile:

Думаю, что что-то вроде этого, вероятно, будет работать.


  1. Упростить кнопки, изменить их расположение, сделать стрелки меньше
  2. Добавить кнопку полноэкранного режима и кнопку информации для отображения нижней панели с данными
1 лайк

Отлично! Надеюсь, у вас всё получится :crossed_fingers:t3:

2 лайка

Вот обновление для этого компонента темы :tada: Оно еще не слито, но вы можете попробовать, как оно работает в Theme Creator.

Изменения, как я упоминал в этом посте: Custom Lightbox - modern, swipe gestures, fullscreen mode and more - #9 by Don.

  1. Кнопка полноэкранного режима (также можно активировать клавишей F)
  2. Кнопка показа/скрытия заголовка
  3. Иконка уменьшения масштаба отображается только после увеличения.
  4. Стрелки скрыты на мобильных устройствах
  5. Также добавлены жесты свайпа для более удобного использования на сенсорных экранах:
    • свайп вправо — предыдущее изображение
    • свайп влево — следующее изображение
    • свайп вниз — закрытие лайтбокса
  6. Некоторые улучшения UX

Это обновление также удалит настройки.

2 лайка

Выглядит отлично, Дон! Единственная проблема, которую я заметил: при нажатии на стрелки «назад/вперед» лайтбокс закрывается, а при использовании клавиш на клавиатуре всё работает как положено. Я попробовал разные браузеры, и результат одинаковый.

2 лайка

Спасибо, я уже исправил. Можете проверить?

1 лайк

Работает!

2 лайка

Привет :wave:

Я объединил новую кастомную галерею :tada:

Также обновил первое сообщение…

4 лайка

Привет :wave:

Я добавил отсутствовавшую функцию для сенсорных устройств: FEATURE: Change image click behaviour to toggle zoom on touchscreen · VaperinaDEV/discourse-custom-lightbox@7d588e2 · GitHub

Навигация по изображениям теперь работает с помощью свайпов, поэтому мы можем использовать клик по изображению для переключения масштабирования (приближение/удаление).

2 лайка

Привет :wave:

Вот новое обновление! :tada:

Это обновление включает несколько улучшений дизайна:

  • Убраны отступы вокруг лайтбокса
  • Теперь можно увеличивать и небольшие изображения
  • Новый дизайн кнопок с прозрачным чёрным фоном, благодаря чему кнопки видны даже на светлых изображениях и т.д.

Screenshot 2025-05-14 at 9.00.45


Улучшения для десктопа:

Прокрутка увеличенных изображений на десктопе, особенно горизонтальная, была не очень удобной.
Это обновление вводит механизм прокрутки с отслеживанием курсора для улучшения пользовательского опыта.


2 лайка