Lightbox для Joomla-4

Lightbox - це невеликий скрипт JavaScript, який відображає зображення, відео та контент у спливаючому вікні, затемняючи решту сторінки.

Joomla-4 для спливаючих елементів за замовчуванням використовує modal Bootstrap-5, про нього розказано в попереднiй статтi. Modal гарний для поодиноких випадків, або для виведення статичного контенту (форми реєстрації, зворотний дзвінок тощо).

Якщо ви додаєте на сайт багато зображень і хочете їх показувати у спливаючому вікні, краще використовувати скрипт Lightbox, для галереї це найкраще рішення. Можна звичайно робити Modal галерею прямо в редакторі, але доведеться уважно редагувати код html, дуже довгий код, чому звичайний користувач не навчений і зробити не зможе. Нехай із картинками справляється JavaScript.

На попередніх версіях joomla я використовав скрипт Lightbox-2, який написаний на jQuery. Розробник мав плани відвернутися від залежності jQuery, але схоже він закинув свій проект. Я перерив весь інтернет у пошуках простого скрипту для картинки, що спливає. Вдалося знайти лише два, не дуже складних, але нестабільно працюючих. Довелося залізти в код та зібрати новий скрипт.
Я спростив, скоротив код, почистив css, прибрав непотрібні "прикраси". Вийшов простий, швидкий, легкий скрипт, який працює стабільно у всіх браузерах, адаптивний до всіх екранів. Назвав його JLightbox (звучить оригінально і відразу зрозуміло для чого зроблено 😉), він написаний на чистому JavaScript, без jQuery та інших залежностей.

Все візуальне оформлення знаходиться у файлі CSS. Значки навігації не залежать від шрифту іконки, вони вбудовані кодом svg.

Також я вніс зміни до редактора TinyMCE - до плагіну "Вставити посилання" додано аттрибут і клас посилання (інструкція внизу статті).

Базовий функціонал JLightbox

1. Тригером (клац, touch) є елемент class. Bootstrap-5 рекомендує всі інтерактивності робити класом.

2. Для однієї картинки достатньо додати клас події.

<a class="jlightbox" href="/images/banners/banner.jpg"><img src="/images/banners/banner.jpg" /></a>

3. Для Галереї необхідно об'єкти зібрати до групи. Додаємо на посилання аттрибут rel="gallery". Якщо ви бажаєте розмістити на одній сторінці кілька різних галерей, додайте до значення атрибута цифру - gallery1, gallery2, gallery3 і т.д.

<a class="jlightbox" href="/images/sampledata/cassiopeia/nasa1-400.jpg" rel="gallery"><img src="/images/sampledata/cassiopeia/nasa1-400.jpg" /></a>
<a class="jlightbox" href="/images/sampledata/cassiopeia/nasa2-400.jpg" rel="gallery"><img src="/images/sampledata/cassiopeia/nasa2-400.jpg" /></a>

4. Додаємо Назву картинки title

<a class="jlightbox" href="/images/sampledata/cassiopeia/nasa1-400.jpg" rel="gallery" title="Cassiopeia 1"><img src="/images/sampledata/cassiopeia/nasa1-400.jpg" /></a>

5. Навігація (перегортання картинок) у галереї відбувається всіма можливими способами:

• стрілки клавіатури ◀ ▶
• екран кнопки ❮   ❯
• коліщатко мишка (scroll) ⇕
• свайп у мобільному (swipe the screen) ⎚

6. Є функція "відкрити на весь екран" Fullscreen. На мобільних телефонах відключена через непотрібність.

7. Можна кастомізувати скрипт та дописати код для вставки відео, мапи google, тексту. Я такі речі вважаю надмірністю, lightbox спочатку придумали для показу картинок у спливаючому вікні. Для інших спливаючих об'єктів використовуйте Modal.

Приклади JLightbox

Lightbox 1 image

1. Вставити картинку в матеріал і натиснути на неї мишкою.

2. Натиснути кнопку 🔗 "Вставити посилання"

• Вставити Адреса посилання (url зображення)
• Вибрати Class Image Lightbox
• 

Lightbox Gallery 1

1. Вставити картинку в матеріал і натиснути на неї мишкою.

2. Натиснути кнопку 🔗 "Вставити посилання"

• Вставити адресу посилання (url зображення)
• Выбрати Class Image Lightbox
• Выбрати Rel Gallery Lightbox
• 
• Код має виглядати так

  <a class="jlightbox" href="/images/sampledata/cassiopeia/nasa1-400.jpg" rel="gallery1"><img src="/images/sampledata/cassiopeia/nasa1-400.jpg" /></a>

Lightbox Gallery 2 із назвою картинки при наведенні мишки

1. Вставити картинку в матеріал і натиснути на неї мишкою.

2. Натиснути кнопку 🔗 "Вставити посилання"

• Вставити адресу посилання (url зображення)
• Выбрати Class Image Lightbox
• Выбрати Rel Gallery Lightbox
• У полі Заголовок написати назву картинки
• Код має виглядати так

  <a class="jlightbox" href="/images/sampledata/cassiopeia/nasa1-400.jpg" rel="gallery2" title="Cassiopeia 1"><img src="/images/sampledata/cassiopeia/nasa1-400.jpg" /></a>

Як підключити, куди встановлювати JLightbox для Joomla-4?

JLightbox складається всього з 2 файлів і не є плагіном або модулем. Пояснюється це простою логікою – завжди підключений. Ви не нервуватиметеся, якщо картинка раптом не спливає. Проблема не в коді, а просто ви забули увімкнути плагін (зі мною таке було). Якщо лайтбокс потрібний для поодиноких випадків - підключайте файли через систему ассетів, виводьте скрипт на окремих сторінках (докладніше про це написано тут), такий варіант дуже рідкісний, доки у своїх замовників не зустрічав, завжди встановлюю в index файл шаблону.

1. Скачати архив "JLightbox.zip", розархівувати на свій комп'ютер.

2. Створити на сайті у відповідних папках шаблону 2 файли - user.css и user.js. Joomla-4 автоматично буде використовувати ці файли, як тільки вони з'являться в папці, і не видалятиме їх при оновленні.

• копіюємо з jlightbox.min.css весь код у файл user.css
• копіюємо з jlightbox.min.js весь код у файл user.js

<script>
  var viewer = new JLightbox();
</script>

ПРИМІТКА

1. Кількість картинок у ряду, їх розмір, візуальне оформлення не стосується JLightbox, за це відповідає розмітка сторінки. Я використовую класи row row-cols-*

• row-cols-2 = 2 картинки в ряд
• row-cols-3 = 3 картинки в ряд
• row-cols-4 = 4 картинки в ряд
• і так далі...
• Детальніше читати тут Grid system Bootstrap 5

2. Зміни (доповнення) до редактора TinyMCE вносяться до файлу DisplayTrait.php, який знаходиться в папці плагінівplugins/editors/tinymce/src/PluginTraits/DisplayTrait.php. Після оновлення він звичайно затирається, тому зберегти його на комп'ютер і після оновлення замінити.

Відкрити файл DisplayTrait.php, знайти функцію $scriptOptions['rel_list'] та дописати наступні зміни:

2.1. Додавання свого атрибуту в поле Rel до плагіну "Додати посилання":

$scriptOptions['rel_list'] = array(
...
  array('title' => 'Gallery Lightbox', 'value' => 'gallery'),
...
);

2.2. Додавання свого класу. У базовому налаштуванні блок класів відсутній, тому його потрібно додати - поле клас і назву класу в плагін "Додати посилання". Копіювати та вставити після попереднього блоку:

$scriptOptions['link_class_list'] = array(
	array('title' => 'None', 'value' => ''),
	array('title' => 'Image Lightbox', 'value' => 'jlightbox'),
);

Після таких нескладних маніпуляцій у меню редактора при натисканні на кнопку "Додати посилання" з'являться нові поля. Скріншоти дивитись у прикладах вище.

Скрипт JLightbox автоматизовано для роботи лише у редакторі TinyMCE. В інших редакторах "клас, заголовок та атрибути" потрібно писати руками.

P.S. Зараз дивлюся нову версію редактора TinyMCE (v.6), досить потужна штука. Але в базовому варіанті joomla-4 не включено деякі корисні функціонали. З чим це пов'язано, незрозуміло, можливо, в наступних версіях joomla внесе ці поліпшення в ядро.

Скачайте JLightbox.zip, встановлюйте, можете змінювати стилі CSS (затемнення, швидкість появи, додати рамку навколо тощо).

Скрипт розповсюджується безкоштовно (License GNU/GPLv3), прихованих посилань або бекдорів немає.