Рассматривал разные варианты инструментов для создания всплывающих изображений и галерей.
Нашел модуль и плагин
sigplus (могут работать отдельно).
Скачать можно тут.Позволяют:- делать отдельные всплывающие изображения и галереи,
- можно сделать что угодно и как угодно - масса настроек, подгружает jquery из CDN.
- на странице
sigplus подробная документация и демо.
Сделал небольшую инструкцию (только по основным возможностям) для "конечных" пользователей сайта, привожу ниже.
ИНСТРУКЦИЯ1. Создание Галереи изображенийГалерея изображений реализуется в виде слайдеров. Полноразмерные изображения выводятся в семи вариантах всплывающих окон. Прокрутка миниатюр в слайдере может быть вертикальная или горизонтальная. Элементы навигации – кнопки и ссылки позволяют переходить к следующим группам изображений, а также к началу и концу галереи. В материал, Галерея встраивается при помощи кода {gallery}путь к файлам галереи{/gallery}, пример:
{gallery}school/nagrad{/gallery}
school/nagrad – относительный адрес папки, где хранятся изображения.
Вставка Галереи изображений на страницу1) Для вставки галереи изображений откройте статью в редакторе.
2) В Менеджере изображений создайте папку для изображений Галереи, например myfolder.
3) В папку myfolder загрузите файлы (в форматах .jpg .png .gif, размером не более 640х640px) с вашего компьютера.
4) В тексте статьи вставьте метку Галереи {gallery}myfolder{/gallery}.
Всплывающие названия и описания к изображениямГалерею можно дополнить всплывающими названиями и описаниями к изображениям. При наведении курсора название появится на фоне изображения, описание – во всплывающем окне.
Создайте на своём компьютере файл labels.txt в кодировке UTF-8 и загрузите в папку myfolder. Файл labels.txt содержит список с указанием имени графического файла, названия и описание для каждого изображения.
Формат записи: Имя файла|Название изображения|Описание изображения
Пример файла labels.txt:
cherry.jpg|Вишня|Спелая вишня
pears.jpg|Груши|Сочные груши
Для оформления Галереи можно задать огромное количество параметров, например:{gallery width=100 height=100 maxcount=4 rows=2 cols=3 alignment=center orientation=horizontal navigation=top lightbox=none download=yes}birds{/gallery}
Часто используемые параметры и возможные значения.1) Размещение:– layout = fixed | flow – размещение в отдельном блоке (по умолчанию) или в тексте (по типу картинка - буква в тексте)
– rows, cols – число рядов и колонок для размещения, orientation = horizontal | vertical, максимальное кол-во изображений – maxcount
– alignment = left|center|right|before|after|left-float|right-float|before-float|after-float|left-clear|right-clear|before-clear|after-clear – выравнивание относительно текста (для вставки в текст используйте выравнивание с float)
– width, height – ширина и высота изображений, download = yes | no возможность скачать изображение, crop = 1 | 0 – возможность обрезки краев изображения
2) Границы:– borderwidth = ширина границ вокруг каждой миниатюры в [px]
– bordercolor = цвет границ в hexadecimal от 000000 до FFFFFF
– borderstyle = стиль границ default|none|dotted|dashed|solid|double|groove|ridge|inset|outset
– padding = ширина границ вокруг каждой миниатюры до границ в [px]
– margin = поля вокруг каждой миниатюры за границами в [px].
3)Панель навигации:– navigation = top | bottom | both размещение панели навигации
– buttons = 1 | 0 показывать или нет клавиши < < > > в панели навигации
– links = 1 | 0 показывать или нет слова Предыдущий Следующий в панели навигации.
– counter = 1 | 0 нумерация страниц
– overlay = 1 | 0 показывать или нет стрелки навигации поверх крайних миниатюр.
4) Слайдер миниатюр– slider = none | boxplus.slider | boxplus.carousel | boxplus.transition – вид слайдера
– animation = скорость [ms] анимации миниатюр (по умолчанию 0 – без анимации).
Примеры для разных видов слайдеров:
– slider = boxplus.slider slider:opacity=0.5 - прозрачность миниатюр
– slider=boxplus.carousel slider:positioning=center slider:edges=blurred – полупрозрачные миниатюры крайние (positioning=center, или левые positioning=right)
5) Внешний вид всплывающего окнаlightbox= none|boxplus|boxplus.hover|fancybox|prettyphoto| sexylightbox| slimbox| slimbox2
Примеры для разных видов всплывающих окон:
– lightbox=boxplus lightbox:thumbs=outside – навигационные картинки за пределами всплывающего окна
– lightbox=boxplus.hover – всплывание при наведении
2. Создание всплывающих одиночных изображений1) Вставьте в самом начале текста метку {gallery /}, которая указывает, что изображения в тексте будут «всплывать».
2) В Менеджере изображений выбирите изображение и заполните поле «Альтернативный текст», укажите уменьшенный размер в полях «Размеры». Скопируйте путь к изображению из поля «URL» и нажмите Вставить.
3) Выделив изображение, создайте ссылку инструментом Вставить/Редактировать ссылку. В поле «URL» вставьте, скопированный путь к изображению, в поле «Заглавие» впишите описание изображения.
В гипертексте это выглядит так:
<a href="/images/stories/boxplus/boxpluslogo.jpg" title="Ягода">
<img alt="Вишня" src="/images/stories/fruit/vishnja.jpg" width="75" height="56" /></a>
! Всплывающее и вставленное в текст изображения в приведенном примере могут быть разными или одинаковыми.
Чтобы сделать текстовую ссылку на всплывающее изображение:Выполните п.1, если не сделали это раннее. Затем выделите часть текста - будущей ссылки и, пользуясь инструментом Вставить/Редактировать ссылку, выбирите файл изображения, которое будет всплывать, и внесите описание изображения в поле «Заглавие».
В гипертексте это выглядит так:
<a href="/images/stories/boxplus/logo.jpg" title="Лого-Ягода">Текст</a>
В основном связаны с неправильной настройкой использования jquery.
Для предотвращения "глюков" галереи, библиотеку jquery желательно загружать один раз,
и не использовать программы, требующие разные версии jquery.
Ваш шаблон, какие-нибудь модули или плагины могут тоже загружать jquery,
поэтому надо разрешить загрузку, например шаблону, отключив её в sigplus и других модулях и плагинах.
13.03.2025, 20:06:50