Joomla. Создаём плагин с каруселью jQuery.

Продолжаем изучать CMS Joomla вместе со мной, в этой статье мы сделаем первый плагин для Joomla, интегрировав в Joomla 1.5.22(23) слайдер jQuery в текст статей. Слайдер jQuery можно будет использовать в любом месте содержимого статьи, благодаря использованию тэга {jqueryslider}.

 

 

Для тех, кто мало знаком с Joomla

Палгины – это расширения для Joomla, имеющие возможность интегрирования в отдельные компоненты CMS Joomla. Плагины в целом можно отнести к группе расширений Joomla, наряду с модулями и компонентами.

Однако, плагины имеют собственные отличительные особенности, прежде всего, - это запуск по определённому событию, например в нашем случае плагин будет запускаться по событию «onAfterDisplayContent».

Для тех, кто не встречался с разработкой плагинов для Joomla.

Для того чтобы установить плагин, в соответствие с требованиями предъявляемыми сообществом Joomla, необходимо использовать следующую структуру папок, котоая одновременно будет являться структурой архива установки загружаемого через «Менеджер установки Joomla».

 

./jqueryslider.phpjqueryslider.xmljquery-slider-img/ bg.png tempphoto-5.jpg tempphoto-5thumb.jpg tempphoto-6thumb.jpg tempphoto-4thumb.jpg tempphoto-4.jpg tempphoto-3thumb.jpg scotch-egg.jpg tempphoto-1thumb.jpg tempphoto-1.jpg icon-uparrowsmallwhite.png tempphoto-2.jpg tempphoto-2thumb.jpg tempphoto-3.jpg tempphoto-6.jpg thumb-author.jpg thumb-video-1.jpg thumb-video-2.jpg thumb-video-3.jpg transpBlack.png .DS_Storejqueryslider/ycodaslider-2.0.pack.jsjquery-easing-compatibility.1.2.pack.jsjquery-easing-1.3.pack.jsjquery-1.5.min.jscoda-slider.1.1.1.pack.js.DS_Store

Основными файлами в этой структуре являются:

 

jqueryslider.php (плагин)jqueryslider.xml (установочный файл)

Дополнительны файлы и папки необходимы для правильной работы самого jQuery плагина, который мы назовём «jQuery Slider», поэтому даже, если Вы их удалите, то плагин всё равно установится, хотя и с ошибками, указывающими на отсутствие файлов и Вы сможете его настраивать и отключать в админ. панели.

Давайте разберёмся с установочным файлом jqueryslider.xml.

Прежде всего, при создании установочного файла (в зарубежной литературе данный фал называется «manifest file with xml extension») необходимо соблюдать определённые требования:

файл должен иметь кодировку UTF-8; структура файла должны соответствовать стандартам XML; необходимо указать DOCTYPE;

Сущность установочного файла заключается в его содержимом, заключенным в тег install. Данный тег так же встречается в модулях и компонентах, но для плагина необходимо указывать атрибут type="plugin"</var>, то есть явно указать на принадлежность расширения к плагину Joomla, это очень важно, так как на основании этого тега ваши файлы уёдут в директорию с плагинами, если укажите модуль(module) то «уйдут» в директорию с модулями(папка modules).</p> <p class="textnovosti">Атрибут <var>group="content"</var>. Так же важен, поскольку мы, таким образом, дифференцируем плагины. Наш плагин относится к группе плагинов для работы с контентом, - где же, как не в статьях выводить слайдер?</p> <p class="textnovosti">Посмотрим весь код установочного файла:</var></var></p> <div class="codejquery"> Код Чистый код   1.<span class="aaa"><?xml version="1.0" encoding="utf-8"?> 2.<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD plugin 1.0//EN" "http://dev.joomla.org/xml/1.5/plugin-install.dtd"> 3.<install version="1.5" type="plugin" group="content"> 4.<name>jQuery Слайдер</name> 5.<creationDate>07 июня 2011 г.</creationDate> 6.<author>Александр Ермаков</author> 7.<authorEmail>Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. </authorEmail> 8.<authorUrl>http://slyweb.ru/</authorUrl> 9.<copyright>(c) Александр Ермаков http://slyweb.ru/</copyright>10.<license>GNU/GPL 2.0</license>11.<description>Слайдер на jQuery. Для вставки в любом месте текста статьи можно использовать тэг {jqueryslider}</description>12.<version>1.0</version>13. <files>14. <filename plugin="jqueryslider">jqueryslider.php</filename>15. <filename plugin="jqueryslider">jqueryslider/ycodaslider-2.0.pack.js</filename>16. <filename plugin="jqueryslider">jqueryslider/jquery-easing-compatibility.1.2.pack.js</filename>17. <filename plugin="jqueryslider">jqueryslider/jquery-easing-1.3.pack.js</filename>18. <filename plugin="jqueryslider">jqueryslider/jquery-1.5.min.js</filename>19. <filename plugin="jqueryslider">jqueryslider/coda-slider.1.1.1.pack.js</filename>20. <filename plugin="jqueryslider">jqueryslider/jslider.js</filename>21. <filename plugin="jqueryslider">jqueryslider/jslider.css</filename>22. <filename plugin="jqueryslider">jqueryslider/.DS_Store</filename>23. 24. </files>25. <params>26. <param name="sef" type="radio" default="1" label="Используется ли SEF" description="Выключите, если SEF на сайте отключен">27. <option value="0">Нет</option>28. <option value="1">Да</option>29. </param>30. 31. 32. <param name="pretext" type="text" size="40" default="jQuery плагин:" label="Вступительный текст" description="Напишите текст, добавляемый перед отображением плагина" />33. 34. <param name="size" type="radio" default="48" label="Размер иконок" description="Размер иконок социальных закладок">35. <option value="24">24</option>36. <option value="32">32</option>37. <option value="48">48</option>38. </param>39. 40. <param name="background" type="text" default="#FDFFBC" label="Цвет бэкграунда" description="Цвет бэкграунда - используется css-варианты (http://www.joomla15.ru/вертска/копипасты/56-список_цветов_CSS.html)" />41. 42. <param name="padd" type="text" default="10" label="Отступ между кнопками в пикселях" description="Значение отступа между кнопками в пикселях" />43. 44. <param name="border" type="radio" default="1" label="Нужен ли бордер вокруг">45. <option value="0">Скрыть</option>46. <option value="1">Показывать</option>47. </param>48. 49. <param name="showon" type="radio" default="1" label="Показывать кнопки в конце статьи">50. <option value="0">Нет (только по тэгу {jqueryslider})</option>51. <option value="1">Показывать</option>52. </param>53. 54. <param name="copy" type="radio" default="1" label="Показать ссылку на плагин" description="Показывать ссылку на скачивание плагина">55. <option value="0">Скрыть</option>56. <option value="1">Показывать</option>57. </param>58. 59. 60. </params>61. 62. <params group="advanced">63. </params>64. 65. 66. <media destination="stories/jquery-slider-img/" folder="jquery-slider-img">67. <filename>bg.png</filename>68. <filename>tempphoto-5.jpg</filename>69. <filename>tempphoto-5thumb.jpg</filename>70. <filename>tempphoto-6thumb.jpg</filename>71. <filename>tempphoto-4thumb.jpg</filename>72. <filename>tempphoto-4.jpg</filename>73. <filename>tempphoto-3thumb.jpg</filename>74. <filename>scotch-egg.jpg</filename>75. <filename>tempphoto-1thumb.jpg</filename>76. <filename>tempphoto-1.jpg</filename>77. <filename>icon-uparrowsmallwhite.png</filename>78. <filename>tempphoto-2.jpg</filename>79. <filename>tempphoto-2thumb.jpg</filename>80. <filename>tempphoto-3.jpg</filename>81. <filename>tempphoto-6.jpg</filename>82. <filename>thumb-author.jpg</filename>83. <filename>thumb-video-1.jpg</filename>84. <filename>thumb-video-2.jpg</filename>85. <filename>thumb-video-3.jpg</filename>86. <filename>transpBlack.png</filename>87. <filename>.DS_Store</filename>88. 89. </media>90. 91. 92. 93.</install>94.  Листинг 1.

Думаю, особой сложности он не представляет, возможно Вам не знаком тег media, данный тэг позволяет загружать файлы в директорию media, в которой, как предполагается, данные файлы будут доступны для модификации пользователю через «Медиа менеджер».

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

Файл плагина jqueryslider.php

Для начала, в наш плагин необходимо подключить две библиотеки Joomla:

Код Чистый код   1.<?php  2.   3.defined( '_JEXEC' ) or die( 'Restricted access' );  4.   5.jimport('joomla.event.plugin');  6.jimport('joomla.plugin.plugin');   7.   8.……….  9.  Листинг 2.

Далее следует обработчик события до отображения содержимого статьи:

Код Чистый код   1.…….  2.   3.$mainframe->registerEvent('onPrepareContent', 'plgJSMarks' );  4.   5.…….  6.   7.  Листинг 3.

Функция "plgJSMarks" будет рассмотрена ниже.

После обработчика события следует основная функция плагина «jquerydisp», внутри которой снача проверяется тип документа (переменная GET запроса "view"):

Код Чистый код   1.function jquerydisp( &$article, &$params, $limitstart )  2.{ 3. $view = JRequest::getCmd('view');  4. if ( ($view != 'article')  5. || JRequest::getBool('fullview')  6. || JRequest::getVar('print'))  7. { 8. return null; exit;  9. } 10. 11.…….12. 13.  Листинг 4.

То есть если тип не является статьей, например PDF или файл для печати, нам не к чему выводить остальной код плагина, поэтому мы завершаем выполнение php скрипта.

Остальной код «jquerydisp», где первоначально мы получаем настройки нашего плагина из объекта $params, который содержит настройки файла jqueryslider.xml, то есть $params->get( 'pretext') содержит значение из тега «param» с именем «pretext» файла jqueryslider.xml<.var>.

Код Чистый код   1.<param name="pretext" type="text" size="40" default="jQuery плагин:" label="Вступительный текст" description="Напишите текст, добавляемый перед отображением плагина" /> Листинг 5. Код Чистый код   1.   2. global $mainframe;  3.   4. /* The url adress of page */  5. $currurl = JURI::current();  6. $content='';  7.   8.   9. $baseurl = JURI::base();10. $document = &JFactory::getDocument();11. $title = $document->getTitle();12. 13. /* customs params */14. $pretext = $params->get( 'pretext');15. $h = $params->get( 'size');16. $b = '#FDFFBC';17. $b = $params->get( 'background');18. 19. 20.$content.='<div id="page-wrap">21. 22. <div class="slider-wrap">23. <div id="main-photo-slider" class="csw">24. <div class="panelContainer">25. 26. <div class="panel" title="Panel 1">27. <div class="wrapper">28. <img src="jquery-slider-img/tempphoto-1.jpg" alt="temp" />29. <div class="photo-meta-data">30. Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />31. <span>"Free Tibet" Protest at the Olympic Torch Rally</span>32. </div>33. </div>34. </div>35. <div class="panel" title="Panel 2">36. <div class="wrapper">37. <img src="jquery-slider-img/tempphoto-2.jpg" alt="temp" />38. <div class="photo-meta-data">39. Chicago Bears at Seattle Seahawks<br />40. <span>Fifth field goal, overtime win for the Seahawks</span>41. </div>42. </div>43. </div> 44. <div class="panel" title="Panel 3">45. <div class="wrapper">46. 47. <img src="jquery-slider-img/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>48. 49. <h1>How to Cook a Scotch Egg</h1>50. 51. <ul>52. <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>53. <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>54. <li>1/2 cup AP flour</li>55. <li>1-2 eggs, beaten</li>56. <li>3/4 cup panko-style bread crumbs</li>57. <li>Vegetable oil for frying</li>58. </ul>59. </div>60. </div>61. <div class="panel" title="Panel 4">62. <div class="wrapper">63. <img src="jquery-slider-img/tempphoto-4.jpg" alt="temp" />64. <div class="photo-meta-data">65. A Poem by Shel Silverstein<br />66. <span>Falling Up</span>67. </div>68. </div>69. </div>70. <div class="panel" title="Panel 5">71. <div class="wrapper">72. <img src="jquery-slider-img/tempphoto-5.jpg" alt="temp" />73. <div class="photo-meta-data">74. New Video on CSS-Tricks<br />75. <span>Using Wufoo for Web Forms</span>76. </div>77. </div>78. </div>79. <div class="panel" title="Panel 6">80. <div class="wrapper">81. <h1>A Tale of Two Cities</h1>82. <p><em>Charles Dickins</em></p>83. <blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote>84. </div>85. </div>86. 87. </div>88. </div>89. 90. <a href="#1" class="cross-link active-thumb"><img src="jquery-slider-img/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>91. <div id="movers-row">92. <div><a href="#2" class="cross-link"><img src="jquery-slider-img/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>93. <div><a href="#3" class="cross-link"><img src="jquery-slider-img/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>94. <div><a href="#4" class="cross-link"><img src="jquery-slider-img/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>95. <div><a href="#5" class="cross-link"><img src="jquery-slider-img/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>96. <div><a href="#6" class="cross-link"><img src="jquery-slider-img/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>97. </div>98. 99. </div>100. 101. </div>';102. 103. 104.return $content;105.}106.  Листинг 6.

Переменная $content содержит html структуру слайдера.

Так как все палгины должны содержать функцию конструктор, наследуемыую объекты и функции глобального класса «JPlugin», в нашем случае за это отвечает следующий код:

Код Чистый код   1.   2.   3.class plgcontentJquerySlider extends JPlugin  4.{ 5. function plgcontentJquerySlider (&$subject,$params)  6. { 7. parent::__construct ($subject,$params);  8. $document = &JFactory::getDocument();  9. $document->addStyleSheet( '/plugins/content/jqueryslider/jslider.css' );10. $document->addScript( '/plugins/content/jqueryslider/jquery-1.5.min.js' );11. $document->addScript( '/plugins/content/jqueryslider/jquery-easing-1.3.pack.js' );12. $document->addScript( '/plugins/content/jqueryslider/jquery-easing-compatibility.1.2.pack.js' );13. $document->addScript( '/plugins/content/jqueryslider/coda-slider.1.1.1.pack.js' );14. $document->addScript( '/plugins/content/jqueryslider/jslider.js' );15. }16. 17. function onAfterDisplayContent( &$article, &$params, $limitstart )18. { 19. 20. if ($this->params->get('showon') == 1 ) 21. {22. $content = jquerydisp($article, $this->params, $limitstart );23. }24. 25. return $content; 26. }27.}28.  Листинг 7.

Данный код наиболее важен как для плагина, так и для слайдера, так как он подключает javascript и css файлы, но ещё более важна для нас функция «onAfterDisplayContent», с помощью которой просиходит первоначальный запуск палгина, если параметр «showon» (отображение слайдера только в конце статьи) установлен (1).

Можно сказать, что плагин на этом завершён, однако у нас осталась функция «plgJSMarks».

Замена тега {jqueryslider} внутри текста статьи на jQuery слайдер!

Функция «plgJSMarks» заменят все {jqueryslider} вставкой слайдера, однако, предупреждаю, ДАННЫЙ ПЛАГИН ВОЗМОЖНО ВСТАВИТЬ НА СТРАНИЦУ ЕДИНОЖДЫ, поэтому не пытайтесь вставлять «кучу» тегов {jqueryslider} в текст статьи, - будет работать только первый сверху. Такое ограничение связано с jQuery кодом и HTML разметкой.

Если Вам нужно вставлять неограниченное количество палигнов, нужно избавить слайдер от привязке к id «page-wrap». Другими словами,- это тема другой статьи и другого раздела! Если нужно обращайтесь в раздел «Заказ скрипта»!

функции «plgJSMarks» предназначена для замены тега {jqueryslider}:

Код Чистый код   1.   2.   3.function plgJSMarks( &$article, &$params, $limitstart )  4.{ 5. static $pluginParams = null;  6.   7. if ($params->get('showon') == 1 )   8. { 9. if(preg_match('{jqueryslider}',$article->text))10. {11. 12. $plugin =& JPluginHelper::getPlugin('content', 'jqueryslider');13. $pluginParams = new JParameter( $plugin->params );14. 15. 16. $content = jquerydisp( $article, $pluginParams, $limitstart );17. 18. $article->text = str_replace('{jqueryslider}',$content,$article->text);19. }20. }21. return true;22.}23. 24.  Листинг 8.

Всё, теперь для Вас, как и для меня открыты хорошие возможности для интеграции плагинов jQuery в Joomla!

P.S.

Осталось написать статью о том как сделать код плагина легко доступным для редактирования пользователю из редактора админ. панели, без необходимости ручного изменения файла jqueryslider.php в папке с плагинами. Может кто-то подскажет в каком направлении искать?

http://slyweb.ru



Joomla. Создаём плагин с каруселью jQuery. - Генератор расширений Joomla и многое другое на нашем сайте посвященном работе расширений, компонентов, модулей, плагинов для линейки Joomla. Отправляйте ссылку на страницу своим друзьям и в социальные сети воспользовавшись графическими иконками выше.

Блог

Календарь приёма объявлений

Небольшой пример из повседневной практики. Организация меняет реквизиты, и они вступят в силу через  пару недель. На сайте идет приём объявлений и объявления принимаются на несколько месяцев в...

Дырка в com_content

Сегодня у товарища, сайт которого находится на старой  Joomla 1.0.3, была сильная нагрузка на сервере, просматривая логи обнаружил не вежливый запрос такого порядка: http://сайт/index2...

Лечим вирус на сайте

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

Troj/JSRedir-MH

Снова грянул гром зарежения сайтов новым вирусом  Troj/JSRedir-MH.  И так в коротко по вирусу Troj/JSRedir-MH. Вирус или троян куда интереснее чем свои предшествиники, тепер...

Доработка расширения для рассылки Send Email JK

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

Привет Ie 10 регулярка

И вот и мне пришлось столкнулся с проблемами перехода на win 8 в придачу с ie 10, некоторых постоянных пользователей моих сайтов. На многих сайтах  имеющих раздел по приёму объявлений, использ...

Kunena заменяем ссылку на профиль пользователя

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

Работает на Kunena - зачем на каждой странице?

  Все у кого стоит форум kunena мешает надпись с двумя ссылкам внизу форума "Работает на Kunena". Сея надпись висит на каждой странице форма, а также страница разработчиков содержит множество вн...

Kunena избавимся от лишних quote

Для тех кто действительно делает сайт для людей, моя следующая заметка. Расскажу вам, как избавиться от лишних quote в постах на форуме kunena. У меня несколько тематических сайтов с нормальной посеща...

Kunena решаем проблему с пропажей аватаров

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

Джомлавикам

Обработка параметров расширений joomla

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

Кunena крамсаем шаблон

1. В папке \components\com_kunena\template\ваш_шаблон\ находим файл template.xml и вставляем в него такой кусок (чтобы была возможность выбора показывать это поле или нет): <param name="l...

Подключить свои классы и методы в Joomla?

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

3 новых полезных класса в Joomla 2.5

В платформе Joomla 11.3 разработчики добавлил несколько полезных новых классов для разработчиков. Рассмотрю некоторый из них - JGrid (для построения HTML таблиц), JWebClient (для получения информац...

Репозиторий файлов на Joomla средствами Apache

Создадим две вложенные директории /files/files в корне сайта. Если вы пожелаете использовать другие имена директорий, то вам необходимо будет внести соответствующие правки в дальнейшем. ...