Telegram

Lightbox для Joomla-4

Joomla 4
Lightbox joomla 4

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

Joomla-4 для всплывающих элементов по умолчанию использует modal Bootstrap-5, мы его разобрали в предыдущей статье. 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

cassiopeia joomla 4

1. Вставить картинку в материал и нажать на нее мышкой.

2. Нажать в меню кнопку 🔗 "Вставить ссылку"

lightbox link

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

 

Lightbox Gallery 1

 

1. Вставить картинку в материал и нажать на нее мышкой.

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

  • Вставить адрес ссылки (url изображения)
  • Выбрать Class Image Lightbox
  • Выбрать Rel Gallery Lightbox
  • lightbox joomla-4
  • Код должен выглядеть так 
    <a class="jlightbox" href="/images/sampledata/cassiopeia/nasa1-400.jpg" rel="gallery1"><img src="/images/sampledata/cassiopeia/nasa1-400.jpg" /></a>

 

Lightbox Gallery 2 с названием картинки при наведении мышки

Cassiopeia 1

 

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

Теперь надо подключить скрипт, чтобы он начал работать на странице. Добавляем вызов скрипта в файл index.php (находится в корневой папке шаблона) в самом низу перед закрывающимся </body>

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

lightbox joomla 4 install

 

ПРИМЕЧАНИЕ

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.5), довольно мощная штука. Но в базовом варианте joomla-4 не включены некоторые полезные функционалы. С чем это связано, непонятно, возможно в следующих версиях joomla внесет эти улучшения в ядро.

Скачивайте JLightbox.zip, устанавливайте, можете изменять стили css (затемнение, скорость появления, добавить рамку вокруг и т.п.).

Скрипт распространяется бесплатно (License GNU/GPLv3), скрытых ссылок или бэкдоров нет.
Полный Open Source. Пользуйтесь с удовольствием.