A- A A+
Расширение Joomla - RokBox

Расширение RokBox может отображать различные медиаформаты, такие как изображения, видео, музыку. В плагине использованы преимущества новых технологий HTML5 и CSS3.

Карточка расширения RokBox

Скачать

Дополнительная информация

Тип расширения: Плагин
Версия: 2.0.11
Совместимость: 2.5, 3.x

Текстовое описание урока

Шаг 1. Установка RokBox

Переходим в Расширения => Менеджер расширений и на вкладке Установить из URL вставляем следующую ссылку:

http://www.rockettheme.com/joomla/extensions?task=download.download&id=301&downloadid=dfc993d8

Расширение Joomla - RokBox

Также, можно скачать установочный пакет и установить его на вкладке Загрузить файл пакета.

Шаг 2. Включение расширение

Переходим в Расширения => Менеджер плагинов и находим три строчки:

  • Button - RokBox
  • Content - RokBox
  • System - RokBox

Для включения плагинов, перед их названиями, нажмите на кнопки с красными значками.

Расширение Joomla - RokBox

Шаг 3. Вставка контента

Для работы плагина используются специальные теги, которые вставляются в статьи.

Открываем материал и видим, что под редактором текста появилась новая кнопка Rokbox, позволяющая вставлять контент.

Расширение Joomla - RokBox

При нажатии на кнопку появляется следующее окно:

Расширение Joomla - RokBox

  • Link - Вставка ссылки
  • DOM Element - Объектная модель, используемая для XML/HTML-документов
  • Album - Название альбома
  • Caption - Заголовок
  • Content - Вставка текста или миниатюры

Шаг 4. Ссылка

Рассмотрим создание всплывающих окон с помощью синтаксисов. Итак, создаем ссылку на картинку из текста:

<a data-rokbox href="/images/reklama.jpg">Всплывающая картинка</a>

Нажимаем кнопку Выключить редактор и вставляем представленный код в материал.

Расширение Joomla - RokBox

Предварительно, или после вставки синтаксиса, загрузите картинку с указанным названием в корневую папку сайта images, в которой также можно создать другие папки.

Открываем сайт и видим ссылку с текстом.

Расширение Joomla - RokBox

После клика по тексту, окно браузера затемняется и в центре всплывает картинка.

Расширение Joomla - RokBox

Ссылка на картинку может быть на другой сайт (удаленное изображение):

<a data-rokbox href="http://vitaliykulikov.ru/images/magazin/
magazin_academy-Joomla-29.png">Удаленная картинка</a>

Шаг 5. Миниатюра

Для показа изображения после клика по его миниатюре, потребуется следующая запись:

<a data-rokbox href="/images/chita-rio.jpg"><img src="/images/chita-rio-min.jpg" border="0" alt="Миниатюра" /></a>

Таким образом, мы сначала указали путь к изображению, а затем ссылку на его миниатюру.

Шаг 6. Видео

Попробуем вставить видеоматериал:

< a data-rokbox href="https://www.youtube.com/watch?v=wtziysBzugE" data-rokbox-caption="Видео">Блок новых комментариев</a>

Теперь, при нажатии на ссылку появляется окно с видеоконтентом.

Шаг 7. Аудио

Пример по вставке музыкального сборника:

<a data-rokbox href="http://open.spotify.com/user/w00fz/playlist/
2OCzUYQMB93T19UAq8hGSK">Музыка</a>

Шаг 8. Карта

Создавать всплывающее окна можно и для карт Google:

< a data-rokbox href="https://maps.google.com/maps?q=... " data-rokbox-caption="Карта">Местонахождение</a>

Все синтаксисы данного расширения с демонстрацией работы плагина, вы можете просмотреть, перейдя по ссылке расположенной на вкладке «Демо» вверху данной страницы.

 

Комментарии  

#2 0 Виталий Куликов 03.04.2015 05:51
Цитирую Timofey:
Это т все хрошо, но вот как вставить несколько изображений в одну миниатюр чтобы они листались!? Нигде нет этой инфы!!!

Курс по слайдерам в помощь, там это есть: http://academy-joomla.ru/kursyi-na-dvd/slajdery-na-jquery-dvd9.html
Цитировать
#1 -1 Timofey 02.04.2015 10:16
Это т все хрошо, но вот как вставить несколько изображений в одну миниатюр чтобы они листались!? Нигде нет этой инфы!!! Все одну и туже воду льют которую можно и с официального сайта прочитать
Цитировать

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!