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

[Don]

	Предпросмотр	Theme Creator
	Репозиторий	https://github.com/VaperinaDEV/discourse-custom-lightbox
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

Привет

Этот компонент темы модифицирует модальное окно 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.

[Mr.X_Mr.X]

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

[Don]

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

[Don]

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

[Don]

Привет

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

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

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

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

[davidkingham]

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

[Don]

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

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

[davidkingham]

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

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

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

[Don]

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

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

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

[davidkingham]

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

[Don]

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

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

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

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

[davidkingham]

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

[Don]

@David Kingham

Когда я нажимаю на стрелки «назад»/«вперёд», лайтбокс закрывается.

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

[davidkingham]

Работает!

[Don]

Привет

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

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

FEATURE: New custom lightbox (#10)

[Don]

Привет

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

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

[Don]

Привет

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

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

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

---

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

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

---

DEV: Adds cursor follow mechanism for scrolling on desktop and some design update (#11)