gototopgototop
Register
Вход
HomeПлагины Joomla! /  Rokbox - плагины
Rokbox - плагины E-mail
Повышаем мастерство - Как сделать?...

Картинка Rokbox

Плагины Rokbox от Rockettheme.com

22.04.2013. Внимание! Разработчики больше не поддерживают плагины Rokbox для Joomla 1.5. Кроме этого, вышла версия 2 плагинов, для которой меняется принцип работы. Я не рекомендую тем, у кого стояла версия 1, заменять её на версию 2, - будут проблемы.

Если вы обратили внимание, все уроки снабжены картинками, увеличенное изображение которых появляется в pop-up - окне. На мой взгляд, это очень удобно для обучающихся: прочитал текст - увеличил картинку - изучил - простым щелчком убрал её за ненадобностью - продолжил чтение. Всё в одном окне, не надо отвлекаться на переходы.

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

 

Я отыскала плагины, которые позволяют размещать в pop-up - окнах не только видео и картинки, но и флэш файлы, файлы в формате PDF, и даже страницы других сайтов.
Это бесплатные пока плагины Rokbox (я говорю "пока", потому что мне уже приходилось встречаться с тем, что вчера это было бесплатно, а захожу на сайт через какое-то время - и всё, лавочка закрыта, а рядом с понравившимся мне расширением висит в виде картинки ссылка на платежную систему Pay Pal).

Давайте попробуем поработать с плагинами.

Устанавливаем Rokbox

  1. Rokbox можно скачать из раздела "downloads" Rockettheme.com
  2. Для Joomla 1.5 скачайте  два файла. Они называются так:
    • Rokbox Content Plugin и
    • Rokbox System Plugin
  3. На своём сайте идите в Администратор >> Расширения >> Установить /Удалить и установите оба плагина.
  4. Опубликуйте плагины (то есть просто нажмите на кружок с красным крестиком в строке плагина, чтобы вместо крестика появиласть зеленая галочка): Администратор >> Расширения >> Менеджер плагинов>>нужный плагин.

Как работает Rokbox в статьях?

1. Картинка с линком на другую картинку

Пример:

Audi RS8 :: Проверка работы Rokbox

Код примера:

{ rokbox title=|Audi RS8 :: Проверка работы Rokbox|size=|561 350|}images/stories/demo/rokbox/rs8.jpg{/rokbox }

Внимание! Когда будете использовать этот и последующие коды, убирайте пробелы между кавычкой и ближайшей к ней буквой . Правильно будет так: {rok... и ...box}. Пробелы я сделала для того, чтобы вы смогли увидеть код.

Если необходимо, скачайте себе картинку автомобиля - rs8.jpg и положите её в папку. У меня путь к картинке такой: images/stories/demo/rokbox/rs8.jpg
Разумеется, вы можете использовать любую другую картинку, и путь к ней тоже может быть другим. Но лично я делаю именно так: сначала иду след в след за разработчиком, а уж когда досконально разберусь, что к чему, тогда начинаю свои собственные эксперименты.

Если вы всё сделали правильно, получится результат, как у меня. А у меня он получился с первого захода. Так что будьте внимательны, и всё будет хорошо.
Идем дальше.

2. Текст с линком на картинку

Пример:

Это текст, который ведёт на картинку(нажмите)

Код примера:
{ rokbox title=|Audi RS8 :: Пример линка Текст-Картинка| text=|Это текст, который ведёт на картинку| size=|561 350|}images/stories/demo/rokbox/rs8.jpg{/rokbox }

 

3. Текст с линком на SWF - файл


Пример:

Нажмите, чтобы поиграть с котёнком

Код примера:
{ rokbox title=|Уроки Joomla! :: Игры на перемене| size=|400 140| text=|Нажмите, чтобы поиграть с котёнком|}images/rokbox/Cat.swf{/rokbox }

 

 4. Картинка с линком на YouTube

Пример 1:

Cars :: 2010 Aston Martin Vantage V 12

Код примера 1:

{ rokbox title=|Cars :: 2010 Aston Martin Vantage V 12| thumb=|images/stories/demo/rokbox/youtube.jpg| size=|750 450| album=|demo|}http://www.youtube.com/watch?v=6RWQz0Q7_zY&hd=1&autoplay=1{/rokbox }
 

Пример 2 (текст с линком на видео + цветная тема плэйера):

HD + autoplay + layout colors

Код примера 2:

{ rokbox title=|Cars :: 2010 Aston Martin Vantage V 12| text=|HD + autoplay + layout colors| size=|750 450| album=|demo|}http://www.youtube.com/watch?v=6RWQz0Q7_zY&autoplay=1&fs=1&color1=0x5d1719&color2=0xcd311b&hd=1&border=1{/rokbox }

Пример 3 (картинка с линком на видео + цветная тема плэйера):

Cars :: 2010 Aston Martin Vantage V 12

Код примера 3:
{ rokbox title=|Cars :: 2010 Aston Martin Vantage V 12|thumb=|images/stories/demo/rokbox/youtube.jpg| size=|750 450| album=|demo|}http://www.youtube.com/watch?v=6RWQz0Q7_zY&autoplay=1&fs=1&color1=0x5d1719&color2=0xcd311b&hd=1&border=1{/rokbox }


5. Картинка с линком на страницу другого сайта

Пример 1:

Did you mean... :: ...Google?

Код примера 1:
{ rokbox title=|Did you mean... :: ...Google?| size=|700 450| thumb=|images/rokbox/google.jpg|}http://www.google.com{/rokbox }


Пример 2 ( установленные в % размеры экрана):



Код примера 2:
{ rokbox size=|65% 80%| thumb=|images/stories/demo/rokbox/google.jpg|}http://www.google.com{/rokbox }


6. Картинка с линком на PDF - файл

RokBox :: PDF File

Код:
{ rokbox size=|fullscreen| album=|demo| title=|RokBox :: PDF File| thumb=|images/stories/demo/rokbox/pdf.gif|}images/stories/demo/rokbox/Twitter.pdf{/rokbox }


7. FLV -файл

Пример:

Танцуют все! :: И даже попугай...

Код примера:
{ rokbox title=|Танцуют все! :: И даже попугай...| thumb=|images/stories/demo/rokbox/popka.jpg| size=|550 380| album=|demo|}images/stories/demo/rokbox/popka.flv&buffer=10&autostart=true?=images/stories/demo/rokbox/popka.jpg&fullscreen=true&width=550&height=380{/rokbox }


8. Видео с DailyMotion, Metacafe, Google Video, Vimeo

Пример: Metacafe

Отдых :: На высокой волне

Код этого примера:
{ rokbox title=|Отдых :: На высокой волне| thumb=|images/stories/demo/rokbox/metacafe.jpg| size=|400 345| album=|demo|}http://www.metacafe.com/watch/4426423/surf_ocean_amazing_stunt/{/rokbox }

 

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

Какие медиа форматы поддерживает Rokbox ?

  • Картинки: .gif, .jpg, .jpeg, .png, .bmp
  • Видео: .mov, .m4v, .qt, .mpeg, .divx, .avi, .xvid, .wmv, .wma, .wax, .wvx, .asx, .asf
  • Сервисы: YouTube (включая HD ), DailyMotion, Metacafe, Google Video, Vimeo, Simple .swf files
  • Аудио: .mp3, .wav, .m4a
  • PDF: .pdf
  • Local и Remote URIs




Конфигурируем Rokbox

1) Администратор>>Расширения >> Менеджер плагинов >> Content - RokBox

Здесь вы можете изменить установки для уменьшенных изображений, которые Rokbox генерирует автоматически:




2) Администратор>>Расширения >> Менеджер плагинов>> System - RokBox

Здесь вы можете выбрать тему оформления для Rokbox. По умолчанию это "Light" с белым бэграундом, но вы можете выбрать и другой фон:


Вся документация по настройке плагинов доступна на странице http://www.rockettheme.com/extensions-joomla/rokbox.

Успехов!


 
Copyright © 2011. Joomla! для "чайников". Автор сайта Наталья Мельниченко
Follow us on Twitter