Картинки, фото, галереи

LyteBox - ненавязчивый скрипт для наложения изображений или других объектов на веб-странице который используется на сайте под управлением CMS Joomla. Правильно работает во всех браузерах, бесплатный. Некоторые детища других программистов, выполняющие те же функции, почему-то не имееют кнопку закрытия всплывшего окна. В LyteBox это грамотно реализовано.


Как работает плагин лайтбокс для джумла - всплывающая картинка
Для начала настройте параметры конфигурации, если не устраивают настройки по умолчанию.
В менеджере плагинов находим User Customizations
U24-Lytebox, ставим галочку рядом с ним, потом идем в верхний правый угол и кликаем Редактировать. Нашему взору открывается масса настроек.
Включить измененный вариант - Use Custom JS
Общая конфигурация отвечает за внешний вид и поведение плагина. Итак, что мы имеем?
5 цветовых схем (Themes), задание скорости изменения размеров (Resize Speed), ограничение максимума непрозрачности (Opacity), изменяемую ширину границы (Border Size), тип навигации (Navigation Type), включение/выключение автоматической подгонки размера картинки (Auto Resize)
включение/выключение анимации (Do Animations),
Ниже настройка опций слайдшоу (Slideshow Options),
которая поддерживает HTML, а не только само изображение. Поигравший с этими настройками можно самому понять, что и как работает.
Полезный плагин лайтбокс для сайтов с большим количеством фотографий и рисунков, которые нужно маштабировать. Кстати, не забудьте его включить.
Теперь надо создать рисунок и записать относительный путь к нему (images/stories/plugins/Lytebox.gif") Для примера я сделал большую картинку настроек плагина. Перевести редактирование из в HTML и вставить в нужное место код.
Код для вывода одиночной картинки

<a href="/images/stories/plugins/Lytebox.gif" rel="lytebox" title="Пример работы плагина вывод всплывающей картинки">Рисунок</a>

Где
images/stories/plugins/Lytebox.gif - путь до рисунка
rel="lytebox" - команда вызова плагина
title="Произвольный текст" - название рисунка (показывается в левом нижнем углу всплывающего окна)

Пример:

Рисунок

Вариант с превью реализуется следующим образом:
Делаем в дополнение к полноразмерной картинке уменьшенную. Заливаем её и вставляем в материал обычными средствами редактирования и прописываем для этой картинки ту же самую ссылку.

Lytebox-small

Группа картинок:

<a href="/images/stories/Lytebox1.gif" rel="lytebox[vacation] title="Рис.1">Рисунок1</a>
<a href="/images/stories/Lytebox2.gif" rel="lytebox[vacation] title="Рис.2">Рисунок2</a>


Рисунок1Рисунок2

Слайд-шоу (вместо lytebox команда lyteshow):

<a href="/images/stories/Lytebox1.gif" rel="lyteshow[vacation]" title="Рис.1">Рисунок1</a>
<a href="/images/stories/Lytebox2.gif" rel="lyteshow[vacation]" title="Рис.2">Рисунок2</a>


Если надо, чтобы была одна кнопка - во второй строке убрать Рисунок2

<a href="/images/stories/Lytebox1.gif" rel="lyteshow[vacation]" title="Рис.1">Рисунок1</a>
<a href="/images/stories/Lytebox2.gif" rel="lyteshow[vacation]" title="Рис.2"></a>


Рисунок1


Скачать u24.je.lytebox.j15


Ещё один плагин всплывающих картинок - lightbox gallery