Плагин RokBox. Создаем всплывающие окна для Joomla 2.5.

image

05.04.12
Comments 10

В последнее время очень модно стало увешивать свой сайт различными примочками, в виде всплывающих окон (лайтбоксов), слайдеров, каруселей и т.д., поэтому я решил уделить этому моменту особое внимание, благо на CMS Joomla для реализации креативных идей имеется масса готовых модулей.

Как раз сегодня мы и научимся создавать на своем сайте всплывающие окна или как их еще называют лайтбоксы. В этом нам поможет замечательный плагин RokBox от студии RocketTheme. Посмотреть на работу данного расширения вы можете по этой ссылке. А теперь давайте приступим к установке.

Для начала скачайте плагин с официального сайта, затем установите его через менеджер расширений. Что бы начать работать с этим плагином не обязательно сразу лезть в его настройки, так как картинки будут обрабатываться когда вы обернете ссылку на них специальными тегами.

Чтобы просто наложить на изображение эффект лайтбокса нужно всего лишь обернуть картинку тегами {rokbox} и {/rokbox}, ссылка будет выглядеть следующим образом:

{rokbox}images/kartinka.jpeg{/rokbox}:

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

{rokbox thumb=|images/ kartinka-mini.jpg|} images/ kartinka.jpeg {/rokbox}

Также плагин RokBox позволяет показывать всплывающие изображения при нажатии на ссылку, для этого нужно использовать следующую конструкцию:

{rokbox text=|Лайтбокс для Joomla|} images/ kartinka.jpeg {/rokbox}

Возможно вам понадобится задать заголовок и описание к картинкам, в этом нам поможет параметр title:

{rokbox title=|Лайтбокс для Joomla :: плагин RokBox позволяет делать всплывающие окна на сайте|} images/sexygirl.jpeg {/rokbox}

Обратите внимание что заголовок и описание статьи разделены двумя двоеточиями, до и после которых обязательно нужно использовать пробел.

Можно задавать размер всплывающего окошка, для этого предназначен параметр size.

{rokbox title=| Лайтбокс для Joomla :: плагин RokBox позволяет делать всплывающие окна на сайте | text=| Лайтбокс для Joomla | size=|561 350|} images/ kartinka.jpeg {/rokbox}

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

{rokbox thumb=|images/ kartinka-mini.png|} http://www.youtube.com/watch?v=uyB4qoq-w6U {/rokbox}

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

Tags: 

Комментарии

Игорь 19.04.12

Не совсем понятно, куда вписывать "{rokbox}", на картинку создается ссылка:
<p><img src="images/penguins.jpg;" border="0" width="200" height="200" style="border: 0;" /> Это пингвины</p>
<hr id="system-readmore" />
<p>ПИнгвины</p>. Куда именно вписывать эти тэги({rokbox}{/rokbox})?

Владимир 01.05.12

Почему то не хочет показывать миниатюры, которые я прописываю, а упорно показывает автоматически созданные на джумла 2.5, не подскажете в чём тут подвох?

Дмитрий 05.05.12

Доброго времени суток!
Благодарю за полезную статью!
Вопрос. Можно ли задавать размер не только лайтбокса но и миниатюры? Я указал конкретный файл и для того и для другого, но миниатюру наблюдаю в сильно сплющенном по высоте виде. В примерах на сайте производителя ничего об этом не нашел. Буду благодарен за ответ.

Евгений Владимирович 17.05.12

В настрйоках плагина посмотри там указываешь размеры миниатюры, которые будут создаваться.

Владимир 31.07.12

можно использовать вариант с сылкой на изображение, добавив только rel="rokbox" в теге <a rel="rokbox">
например у меня:

<a href="templates/likom25/images/galereya/fasad.jpg" target="_blank" title="Вид с парадного входа" rel="rokbox"><img src="templates/likom25/images/galereya/fasad.jpg" border="1" alt="Вид с парадного входа" title="Вид с парадного входа" hspace="0" vspace="5" width="90%" /></a>

Ро 02.08.12

Горизонтальные фотографии правильно отображает, а вертикальные растягивает вширину. Как исправить?(
<a href="/images/pictures/Flath/58.jpg" rel="rokbox"><img class="album" src="/images/pictures/Flath/58.jpg" alt="" width="147" height="100" /></a>

Z 12.08.12

2 Игорь Вот как должна выглядеть ссылка: {rokbox title=|ПИнгвины :: Это пингвины| size=|200 200|}images/penguins.jpg{/rokbox}
Кстати у меня превьюшки автоматом не делаются( приходится вручную выставлять:
{rokbox thumb=|images/123.jpg|title=|картинка :: | size=|561 350|}images/123.jpg{/rokbox}
И еще 1 минус, картинку видно только на странице, в редакторе только код

Seo-West.Com 02.09.12

А как настроить стили окна?

seven 16.03.13

Все сделала, как тут написано. У меня почему-то картинки открываются не в лайтбоксе, а в новом окне - просто как если бы это была обычная ссылка. Автор, подскажи, как решить проблему?

Вячеслав 13.02.14

Скажите, а почему когда нажимаешь на изображение оно открывается, а после закрытия мы уезжаем в начало текста а не остаемся на том месте где находится изображение?

Комментировать