Загрузка...
Загружаем последние темы форума...
Плагин для вставки галереи в статью Joomla 3/4/5/6 FancyBox Gallery
- Информация
- Автор: Valery
- Категория: Сайтостроительство – немного html и css
- Просмотров: 1208
Оглавление:
Страница 1 из 2
Плагин FancyBox Gallery – это простое, лёгкое и гибкое решение для создания адаптивных галерей в статьях Joomla 3.10+ и Joomla 4/5/6. Поддержка файлов с описаниями, сортировкой, адаптивный вывод, lazy loading, WebP-оптимизация, alt, title и описание галереи с подсчетом количества доступных фото.
Вы создаете папку с изображениями, и получаете в статье современную галерею с alt и title без необходимости писать код!
Пример галереи созданной плагином FancyBox Gallery
Папка не найдена: 06-photo-articles/018-photo-interior/007
/stories/ – не должно быть в пути!
/stories/ – не должно быть в пути!
Идея: максимально легкий, с минимальным количеством кода и стилей – только самое необходимое! Размер файла стилей всего 2,4кБ, в версии для Joomla 6 верстка на встроенном Bootstrap 5.
Логика: не выводить ВСЕ превью на страницу для ускорения ее загрузки (можно указать сколько). Нет смысла грузить все, что есть и что не будет просмотрено – пользователь видит количество доступных фото в галерее, кликает превью и открывает ВСЕ изображения галереи.
Ручная оптимизация: можно положить в src/ PNG с лучшей компрессией, чем авто-генерация .webp
PNG лучше для скриншотов, WebP – для фото, AVIF – для максимального сжатия.
Сравнение с sigplus: не создаёт дубликатов исходных файлов, не грузит на страницу ВСЕ файлы, не имеет .css и .js
Отсутствие множества превью на странице значительно ее облегчает!
- DOM элементов меньше
- Браузеру легче рендерить и меньше памяти
- Меньше HTTP запросов
- Меньше трафика: 3 превью WebP (≈15KB)
- 18 превью = 18 запросов (≈100KB)
- Даже с lazy loading – это нагрузка
- Страница быстрее становится интерактивной
- Меньше работы для основного потока JS
- На мобильных критично – меньше памяти
Плагин автоматически генерирует превью (src/), создаёт оптимизированные .webp миниатюры (в отдельную папку thumbs/) для отображения галереи Fancybox во всплывающем окне. Превью и миниатюры 100х150 px создаются для всех изображений – объем занимаемый ими копеечный (30 файлов = 60 КБ), а выигрыш в производительности и логике в несколько раз.
FancyBox Gallery без параметров
{fboxgallery}335{/fboxgallery}
Отобразится 3 превью для расположения на странице в 1 ряд – см. пример выше.
Настройки из админки →
Ширина px=200, Высота px=200,
Превью в блоке =3
Библиотека Fancybox должна быть подключена к сайту самостоятельно!
Подключение fancybox в шаблоне joomla
В файле шаблона index.php внутри тегов <head></head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css">
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
Fancybox.bind("[data-fancybox]");
});
</script>В последней версии подключение скрипта fancybox можно активировать в плагине.
Основные настройки административной части можно переопределить прямо в статье с помощью параметров в теге плагина, как это принято в Joomla: добавьте параметр в тег, и он будет обработан автоматически.
Плагин использует современный API, но сохраняет совместимость со старыми структурами (например, папка images/stories/), что позволяет корректно работать с любыми путями.
Административная часть плагина Content - FancyBox Gallery
Структура папок галереи
Плагин автоматически создаёт следующую структуру папок для каждой галереи:
001/ # Оригиналы изображений уникальный ID галереи
├── thumbs/ # Сгенерированные миниатюры .webp 150х100 для галереи fancybox
├── src/ # Превью на странице (масштабированные/обрезанные)
└── fboxgallery.txt # Файл с описаниями и порядком изображений
Файл fboxgallery.txt (название может быть изменено в админке плагина) должен находиться в той же папке, что и изображения (например, в 001). Он задаёт как порядок отображения, так и подписи (alt/title) через разделитель – символ «|»:
Наличие файла с подписями необязательно.
Структура файла подписей
имя_файла1.jpg|Альтернативный текст это alt|Заголовок это title
имя_файла2.jpg|Альтернативный текст alt|Заголовок title
имя_файла3.jpg|Альтернативный текст alt|Заголовок titleВарианты использования:
Настройки админки при вставке галереи можно переопределять тегами.
- src_count=X → сколько превью показать
- src_count=0 → галерея без превью, только с кнопками
- preview_width → ширина превью px auto
- preview_height → высота превью
- caption → описание галереи (для figcaption)
- counter=0 → 0/1/2 отображение и тип счетчика
1. Количество отображения превью
Настройки плагина в админке Превью в блоке будут перезаписаны src_count=1 в результате получим 1 превью 500 px по ширине и кнопки с подписями под ним. При к клике на большое превью открывается галерея в стиле Fancybox.
Первое изображение в файле описаний будет первым на странице. При отсутствии файла подписей сортировка будет по названиям оригиналов.
При клике на кнопку (под изображением) открывается нужное изображение в стиле галереи Fancybox.
{fboxgallery src_count=1}335{/fboxgallery}
Размер 1 крупного изображения (постер) шириной 500 px задан в админке. Другой размер можно задать тегами:
preview_width=600 preview_height=600
Код вставки галереи с одним превью:
{fboxgallery src_count=1 preview_width=600 preview_height=600}335{/fboxgallery}
Для одиночного превью задан отдельный стиль в CSS.
Размер превью можно задать самостоятельно тегами:
preview_width=200, preview_height=300
Пропорциональная ширина (AUTO):
Масштабирование с сохранением пропорций до ширины 500px, высота – автоматическая с сохранением пропорций.
{fboxgallery preview_width=500 preview_height=auto}335{/fboxgallery}Создание галереи без превью
Параметр src_count=0 создаст галерею без превью с кнопкой:
После изменения настроек размеров или добавления новых изображений – необходимо удалить папки: thumbs/ и src/
Файл стилей всего несколько строк, поэтому лучше добавить его в файл стилей шаблона и отключить в админке.
Скачать – Плагин Joomla 3/4/5/6 FancyBox Gallery
Была загружена тестовая первая версия, которая не работает с тегами.
Сейчас загрузка обновлена - можно установить сверху. Появятся в админке поля для настройки плагина ну и все остальное должно работать.
2. Обновите версию - вчера выложил версию с кнопкой подключения скрипта - где есть теги должен подключаться скрипт Fancybox с CDN.
Я не проверял, т.к. у меня скрипт Fancybox подключен в шаблоне для всех страниц, но должно работать.
Рамочки - смотрите в своем css - в плагине все классы стилей уникальные .fboxgallery навряд ли они перебивают ваши стили шаблона.
Если есть ссылка для теста - дайте посмотреть.
+ В статье см. выше описал подключение скрипта.