Плагины Rokbox от Rockettheme.com
22.04.2013. Внимание! Разработчики больше не поддерживают плагины Rokbox для Joomla 1.5. Кроме этого, вышла версия 2 плагинов, для которой меняется принцип работы. Я не рекомендую тем, у кого стояла версия 1, заменять её на версию 2, - будут проблемы.
Если вы обратили внимание, все уроки снабжены картинками, увеличенное изображение которых появляется в pop-up - окне. На мой взгляд, это очень удобно для обучающихся: прочитал текст - увеличил картинку - изучил - простым щелчком убрал её за ненадобностью - продолжил чтение. Всё в одном окне, не надо отвлекаться на переходы.
Точно в таком же всплывающем окне можно и видео посмотреть. На мой взгляд, подобный эффект делает просмотр более симпатичным.
Я отыскала плагины, которые позволяют размещать в pop-up - окнах не только видео и картинки, но и флэш файлы, файлы в формате PDF, и даже страницы других сайтов.
Это бесплатные пока плагины Rokbox (я говорю "пока", потому что мне уже приходилось встречаться с тем, что вчера это было бесплатно, а захожу на сайт через какое-то время - и всё, лавочка закрыта, а рядом с понравившимся мне расширением висит в виде картинки ссылка на платежную систему Pay Pal).
Давайте попробуем поработать с плагинами.
Устанавливаем Rokbox
- Rokbox можно скачать из раздела "downloads" Rockettheme.com
- Для Joomla 1.5 скачайте два файла. Они называются так:
- Rokbox Content Plugin и
- Rokbox System Plugin
- На своём сайте идите в Администратор >> Расширения >> Установить /Удалить и установите оба плагина.
- Опубликуйте плагины (то есть просто нажмите на кружок с красным крестиком в строке плагина, чтобы вместо крестика появиласть зеленая галочка): Администратор >> Расширения >> Менеджер плагинов>>нужный плагин.
Как работает Rokbox в статьях?
1. Картинка с линком на другую картинку
Пример:
Код примера:
{ 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:
Код примера 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 (картинка с линком на видео + цветная тема плэйера):
Код примера 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:
Код примера 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 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.
Успехов!
Читайте также:
Ещё статьи:
|
