Записки старого джумловода

Делаем всплывающие лайтбоксы на Joomla

Наверное, всем прекрасно известен эффект плавного увеличения фотографии при нажатии на миниатюру или ссылку. Таким эффектом уже несколько лет никого не удивишь. Но я еще помню времена, в которые это выглядело просто завораживающе. Когда я впервые в жизни наткнулся на фотографию с таким увеличением, то я как идиот открывал и закрывал ее минут 10 подряд и все никак не мог надивиться. Мне казалось, что я попал в будущее, настолько круто это выглядело. В общем, что-то я расп***елся :) В этой статье мы рассмотрим очень хороший плагинчик под названием RokBox, который делает создание лайтбоксов с фотками очень удобным.

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

Примеры:

Фотка с миниатюрой	Без миниатюры	Видео
	Фото красивой девушки

Если это то, что вам нужно, то забираем дистрибутивы по прямым ссылкам и далее рассмотрим настройку Rokbox:

Скачать плагин RokBoX для Joomla 1.5

Скачать плагин RokBox для Joomla 1.6-1.7

Установка плагина Rokbox

Итак. Если вы используете Joomla 1.5, то сначала распакуйте скачанный архив. В нем находится два плагина. Ставьте их поочередно через стандартную установку. Затем включите их в менеджере плагинов. Если вы используете Joomla 1.6 или Joomla 1.7, то просто устанавливайте скачанный выше дистрибутив. В нем уже содержатся оба плагина. Теперь переходим к настройке.

 

Установка плагина Rokbox

Плагин Rokbox использует довольно простой синтаксис. Открывающими и закрывающими тегами являются

{rokbox} и {/rokbox} соответственно.

Предположим, у нас есть картинка sexygirl.jpeg, которая находится в папке images. Самая простая конструкция будет выглядеть вот так:

Код в статье	Результат
{rokbox}images/sexygirl.jpeg{/rokbox}

В данном случае, миниатюра создалась сама, то есть автоматически. Ее размеры вы можете задать в настройках плагина Content - Rokbox. Но такой вариант нас может устраивать не всегда по причине того, что автоматически создаваемая миниатюра может терять в качестве, приобретать дурацкие пропорции и вообще выглядеть некрасиво. Поэтому, разработчики плагина предоставили нам возможность установить свою миниатюру. Для примера, я возьму миниатюру машинки, которая была примером в самом начале статьи. Лежит она в той же папке и называется dreamsdemomini.jpg. Указать миниатюру мы можем с помощью параметра thumb, который прописывается следующим образом:

Код в статье	Результат
{rokbox thumb=|images/dreamsdemomini.jpg|} images/sexygirl.jpeg {/rokbox}

Теперь, если вы нажмете на машинку, то откроется красивая девушка из первого примера. Обратите внимание на палочки | в параметре thumb. Они помогают не запутаться, когда много настроек. Т.е. целиком этот параметр имеет следующий вид: thumb=|путь| . И все остальнные настройки оформляются точно также. Кстати, напомню как писать эти палочки: переключаем раскладку на английскую, нажимаем шифт и кнопку обратного слеша "\" (она рядом с энтером).

Теперь давайте представим, что нам не хочется загромождать место в статье всякими миниатюрами, поэтому нам надо сделать так, чтобы картинка увеличивалась при нажатии на ссылку. Данная возможность, как вы уже догадались, также присутствует в рассматриваемом плагине. Нам поможет параметр text. Целиком код и результат будут выглядеть вот так:

Код в статье	Результат
{rokbox text=|Красивая девушка|} images/sexygirl.jpeg {/rokbox}	Красивая девушка

Поскольку мы с вами люди серьезные, то наши картинки должны иметь названия и описания. В этом нам поможет параметр title . В нем указывается заголовок и описание фотографии, которые разделяются двойным двоеточием :: . Давайте возьмем пример с миниатюрой в виде машинки и добавим в него описание для нашей подопытной леди. То есть, мы будем использовать два параметра: thumb и title. Получится следующее:

Код в статье	Результат
{rokbox title=|Девушка джумловод :: Приморская барышня с красивыми сиськами, омываемая водами неведомых нам морей| thumb=|images/dreamsdemomini.jpg|} images/sexygirl.jpeg {/rokbox}

Главным и ключевым моментом в создании заголовков и описаний является ОБЯЗАТЕЛЬНОСТЬ пробела до и после двойного двоеточия. Иначе, заголовок отобразится как часть описания. Конечно, если вам нужно только описание без заголовка, то можно писать вообще без двоеточий.

На этом я пожалуй окончу описание основных особенностей создания лайтбоксов с помощью плагина RokBox. Надеюсь, основную логику работы с ним вы усвоили.

Как вставить видео во всплывающее окно RokBox

Разработчики плагина снабдили его очень интересной, на мой взгляд, функцией. Во всплывающее окно можно вставить ролик с ютуба. Я показывал это на примере гитариста в начале статьи. Тут все точно также, как и в примере с картинками, только вместо пути к картинке надо вставить ссылку на видео с youtube.com. Поскольку миниатюра с ютуба тут автоматически не сделается, то делаем свою. В моем случае она называется baronevideo.png. Короче говоря, сооружаем вот такой код:

Код в статье	Результат
{rokbox thumb=|images/baronevideo.png|}http://www.youtube.com/watch?v=wDFP_MbvyGc{/rokbox}

Советую вставлять данный код сразу в html код статьи, так как многие визуальные редакторы могут автоматически переделать ссылку на видео в html формат и в результате ничего не будет работать. Если хотите добавить к видеоролику описание, то делайте все также, как мы делали с картинками. Также, существуют дополнительные параметры, с помощью которых можно указать размер видео, задать автоплей и т.д. Подробнее обо всем этом читайте на официальной странице плагина по этой ссылке (английский язык, но все понятно)

В настройках плагина System - Rokbox можно попереключать пресеты, т.е. стили открывания окна. По умолчанию стоит Light, но возможно, вам подойдет какой-нибудь другой.

Плагин продублировал в прикреплении. Если есть вопросы - пишем в комментариях.

P.S. Гитариста на видео зовут Стефано Бароне. Он итальянец. Играет очень хорошую музыку, поэтому рекомендую к прослушиванию :)