Создаём JL-Slider для Joomla своими руками

Многие из нас любят Joomla. Этот движок предлагает массу возможностей для создания любого сайта и с любым видом. Но, не смотря на очевидные плюсы, он всё же не лишён недостатков. Практически каждый администратор, если не все, при установке движка и шаблона, начинает доводить свой интернет проект до ума. Делают это при помощи расширений: плагинов, компонентов и модулей. Сайт становиться изящней, с визуальной точки зрения и приобретает необходимые возможности. Но лично мне есть, за что поругать этот движок. У медали, как говориться, две стороны:

Во-первых, расширяемость это хорошо. Однако подводных камней здесь предостаточно, к примеру, конфликт скриптов. Ставим компонент, а он не работает или ещё хуже, страница отказывается нормально открываться. К тому же, все мы знаем, как разработчики расширений любят делать свои творения платными. Наверное, больше половины всех расширений в интернете частично платные. Самые удобные и интересные возможности разработчики прячут и просят за них деньги.

Во-вторых, Joomla перегружена лишним. Она состоит из массы отдельных частей собранных в одном месте. Если вы зайдёте в «Панель управления –> Расширения –> Менеджер Расширений –> Управление», то увидите весь список того, что в движке находиться. Каждый из этих элементов имеет свою собственную строчку в базе данных и периодически обращается к ней, что парой сказывается на скорости открытия страниц. Стоит так же учесть информацию и скрипты, которые автоматически добавляются в начало страницы сайта. И если нам что-то не требуется для работы ресурса, придётся убирать. Если вы опытный, то никаких проблем, а если новичок, то местные настройки - это сущий ад.

Сегодня я предлагаю вам избежать две описанные выше проблемы. Мы создадим красивый элемент дизайна, который сможем легко настроить, а главное это бесплатно. Сделаем анимированный слайдер на HTML, а после внедрим его в стандартный шаблон protostar от Joomla 3.5.х. Имя дал ему простое - JL-Slider, работать он будет на jQuery.

img 01

Создаём JL-Slider на HTML

1. Для начала нам необходимо создать на рабочем столе папку с названием JL-Slider, внутри которой будет ещё одна папка images. Теперь, используя программу NotePad++, создадим дополнительно 3 файла - index.html, jl-slider.js, style.css. Откройте их в Notepad++ и пока не закрывайте.

Всё должно получиться так, как у меня на этой картинке:

img 02

2. Стили писал таким образом, чтобы широкоформатная картинка выравнивалась сверху по центру и подстраивалась по ширине слайдера. Поэтому находим в любом удобном для вас месте четыре изображения и бросаем их в папку images. Я взял 4 jpg с разрешением 1920x1200px. Но нечего страшного, если высота и ширина будут немного отличаться. На самом деле, таблицу стилей можно легко перестроить под свои нужды, а пока смотрим на мой пример:

img 03

Не забываем менять название на такое же, как на картинке.

3. В открытый файл index.html вставляем этот код и сохраняем:

HTML код:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>JL-Slider</title>
  6.     <link rel="stylesheet" href="style.css">
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  8.     <script type="text/javascript" src="jl-slider.js"></script>
  9. </head>
  10. <body>
  11.  
  12. <!------------ Слайдер ------------>
  13. <div id="slider-wrap">
  14.     <div id="slider">
  15.         <div>
  16.         <div></div>
  17.             <h2>Заголовок</h2>
  18.             <p>Это динамический JL-Slider. В нём расположены 4 широкоформатных изображения 
  19.             и кнопки навигации. Так же присутствуют две области «Preview» и «Next» по бокам слайдера для удобства 
  20.             переключения картинок. Если навести курсор, то он остановится.</p>
  21.         </div>
  22.         <div><img src="images/1.jpg"></div>
  23.         <div><img src="images/2.jpg"></div>
  24.         <div><img src="images/3.jpg"></div>
  25.         <div><img src="images/4.jpg"></div>
  26.     </div>
  27. </div>
  28. <!------------ Слайдер ------------>
  29.  
  30. </body>
  31. </html>

4. Теперь в style.css вставляем это:

CSS код:
  1. body {
  2.     background: #495267;
  3. }
  4.  
  5. #slider-wrap { /* Оболочка слайдера и кнопок */
  6.     width: 900px;
  7.     margin: 0 auto;
  8. }
  9.  
  10. #slider { /* Оболочка слайдера */
  11.     width: auto;
  12.     height: 500px;
  13.     overflow: hidden;
  14.     border: #f5f5f5 solid 10px;
  15.     position: relative;
  16. }
  17.  
  18. .slide { /* Слайд */
  19.     width: 100%;
  20.     height: 100%;
  21. }
  22.  
  23. .slide img { /* выравнивание картинки */
  24.     width: 100%;
  25. }
  26.  
  27. .sli-links { /* Кнопки смены слайдов */
  28.     margin-top: -45px;
  29.     text-align: center;
  30. }
  31.  
  32. .sli-links .control-slide {
  33.     margin: 5px;
  34.     display: inline-block;
  35.     text-indent: -9999px;
  36.     opacity: 0.8;
  37.     background: #eee;
  38.     width: 16px;
  39.     height: 16px;
  40.     border-radius: 8px;
  41.     overflow: hidden;
  42.     box-shadow: 0 1px 2px #000;
  43. }
  44.  
  45. .sli-links .control-slide:hover {
  46.     cursor: pointer;
  47.     background-position: center center;
  48. }
  49.  
  50. .sli-links .control-slide.active {
  51.     background-position: center top;
  52.     background: #a9a9a9;
  53. }
  54.  
  55. #prewbutton { /* Ссылка "Педыдущий" */
  56.     display: block;
  57.     width: 14%;
  58.     height: 100%;
  59.     position: absolute;
  60.     top: 0;
  61.     overflow: hidden;
  62.     text-indent: -999px;
  63.     background: #ddf1f1;
  64.     opacity: 0;
  65.     z-index: 3;
  66.     outline: none !important;
  67. }
  68. #nextbutton { /* Ссылка "Следующий"*/
  69.     display: block;
  70.     width: 14%;
  71.     height: 100%;
  72.     position: absolute;
  73.     top: 0;
  74.     overflow: hidden;
  75.     text-indent: -999px;
  76.     background: #ddf1f1;
  77.     opacity: 0;
  78.     z-index: 3;
  79.     outline: none !important;
  80.     right: 0px;
  81. }
  82.  
  83. #prewbutton:hover, #nextbutton:hover {
  84.     opacity: 0.4;
  85. }
  86.  
  87. .slide-text-block { /* Прозрачная область под текстом */
  88. position: absolute;
  89.     z-index: -1;
  90.     height: 100%;
  91.     width: 100%;
  92.     background: #000;
  93.     opacity: 0.5;
  94. }
  95. .slide-text{ /* Текст внутри слайдера */
  96.     position: absolute;
  97.     width: 50%;
  98.     bottom: 10%;
  99.     left: 15%;
  100.     color: #fff;
  101.     font-family: arial;
  102.     z-index: 3;
  103. }
  104.  
  105. .slide-text-title { /* Заголовок */
  106.     padding: 0 10px;
  107. }
  108.  
  109. .slide-text-desc { /* Описание */
  110.     padding: 0 10px;
  111. }

5. И последнее, в jl-slider.js необходимо написать действия слайдера:

jQuery код:
  1. (function ($) {
  2. var jlSlideSpeed = 1000; //Скорость анимации перехода.
  3. var jlTimeOut = 5000; //Время до автоматического перелистывания.
  4. var jlNeedLinks = true; //Включает или отключает показ ссылок "следующий - предыдущий". Значения true или false.
  5.  
  6. $(document).ready(function(e) {
  7.     $('.slide').css(
  8.         {"position" : "absolute",
  9.          "top":'0', "left": '0'}).hide().eq(0).show();
  10.     var slideNum = 0;
  11.     var slideTime;
  12.     slideCount = $("#slider .slide").size();
  13.     var animSlide = function(arrow){
  14.         clearTimeout(slideTime);
  15.         $('.slide').eq(slideNum).fadeOut(jlSlideSpeed);
  16.         if(arrow == "next"){
  17.             if(slideNum == (slideCount-1)){slideNum=0;}
  18.             else{slideNum++}
  19.             }
  20.         else if(arrow == "prew")
  21.         {
  22.             if(slideNum == 0){slideNum=slideCount-1;}
  23.             else{slideNum-=1}
  24.         }
  25.         else{
  26.             slideNum = arrow;
  27.             }
  28.         $('.slide').eq(slideNum).fadeIn(jlSlideSpeed, rotator);
  29.         $(".control-slide.active").removeClass("active");
  30.         $('.control-slide').eq(slideNum).addClass('active');
  31.         }
  32. if(jlNeedLinks){
  33. var $linkArrow = $('<a id="prewbutton" href="#">&amp;lt;</a><a id="nextbutton" href="#">&amp;gt;</a>')
  34.     .prependTo('#slider');        
  35.     $('#nextbutton').click(function(){
  36.         animSlide("next");
  37.         return false;
  38.         })
  39.     $('#prewbutton').click(function(){
  40.         animSlide("prew");
  41.         return false;
  42.         })
  43. }
  44.     var $adderSpan = '';
  45.     $('.slide').each(function(index) {
  46.             $adderSpan += '<span class = "control-slide">' + index + '</span>';
  47.         });
  48.     $('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
  49.     $(".control-slide:first").addClass("active");
  50.     $('.control-slide').click(function(){
  51.     var goToNum = parseFloat($(this).text());
  52.     animSlide(goToNum);
  53.     });
  54.     var pause = false;
  55.     var rotator = function(){
  56.             if(!pause){slideTime = setTimeout(function(){animSlide('next')}, jlTimeOut);}
  57.             }
  58.     $('#slider-wrap').hover(    
  59.         function(){clearTimeout(slideTime); pause = true;},
  60.         function(){pause = false; rotator();
  61.         });
  62.     rotator();
  63. });
  64. })(jQuery);

Параметры, которые можно изменить подписал.

Когда все выше действия будут выполнены, откройте index.html через свой браузер. Посмотреть ДЕМО.

Вот так легко и быстро можно создать слайдер на html. Подробнее о его возможностях мы ещё поговорим, а сейчас предлагаю, приступим к работе с php.

Создаём JL-Slider для шаблона Joomla

Мы задались целью внедрить наш JL-Slider в шаблон для Joomla, поэтому стоит оговориться, прежде чем начинать. Я использую последнюю версию Joomla 3.5.x и стандартный шаблон protostar. Нет не одного расширения. У нас будут дополнительные параметры в менеджере шаблонов, где можно выбрать: показать или скрыть слайдер, загрузить каждую из четырёх изображений и написать свой текст с заголовком. А ещё немного поправил таблицу стилей, но только для того, чтобы слайдер встал ровно в моём случае. Остальное по ходу работы.

1. Пишем стили

На сервере при помощи FileZilla находим файл template.css нашего шаблона. Он расположен …/templates/protostar/css/template.css. Открываем и вставляем в самую нижнюю часть файла следующий код:

CSS код:
  1. /* JL-Slider */
  2. #slider-wrap { /* Оболочка слайдера и кнопок */
  3.     width: 900px;
  4.     margin: -15px auto 20px;
  5. }
  6.  
  7. #slider { /* Оболочка слайдера */
  8.     width: auto;
  9.     height: 500px;
  10.     overflow: hidden;
  11.     border: #e2e2e2 solid 10px;
  12.     position: relative;
  13. }
  14.  
  15. .slide { /* Слайд */
  16.     width: 100%;
  17.     height: 100%;
  18. }
  19.  
  20. .slide img { /* выравнивание картинки */
  21.     width: 100%;
  22. }
  23.  
  24. .sli-links { /* Кнопки смены слайдов */
  25.     margin-top: -45px;
  26.     text-align: center;
  27. }
  28.  
  29. .sli-links .control-slide {
  30.     margin: 5px;
  31.     display: inline-block;
  32.     text-indent: -9999px;
  33.     opacity: 0.8;
  34.     background: #eee;
  35.     width: 16px;
  36.     height: 16px;
  37.     border-radius: 8px;
  38.     overflow: hidden;
  39.     box-shadow: 0 1px 2px #000;
  40. }
  41.  
  42. .sli-links .control-slide:hover {
  43.     cursor: pointer;
  44.     background-position: center center;
  45. }
  46.  
  47. .sli-links .control-slide.active {
  48.     background-position: center top;
  49.     background: #a9a9a9;
  50. }
  51.  
  52. #prewbutton { /* Ссылка "Педыдущий" */
  53.     display: block;
  54.     width: 14%;
  55.     height: 100%;
  56.     position: absolute;
  57.     top: 0;
  58.     overflow: hidden;
  59.     text-indent: -999px;
  60.     background: #ddf1f1;
  61.     opacity: 0;
  62.     z-index: 3;
  63.     outline: none !important;
  64. }
  65. #nextbutton { /* Ссылка "Следующий"*/
  66.     display: block;
  67.     width: 14%;
  68.     height: 100%;
  69.     position: absolute;
  70.     top: 0;
  71.     overflow: hidden;
  72.     text-indent: -999px;
  73.     background: #ddf1f1;
  74.     opacity: 0;
  75.     z-index: 3;
  76.     outline: none !important;
  77.     right: 0px;
  78. }
  79.  
  80. #prewbutton:hover, #nextbutton:hover {
  81.     opacity: 0.4;
  82. }
  83.  
  84. .slide-text-block { /* Прозрачная область под текстом */
  85. position: absolute;
  86.     z-index: -1;
  87.     height: 100%;
  88.     width: 100%;
  89.     background: #000;
  90.     opacity: 0.5;
  91. }
  92. .slide-text{ /* Текст внутри слайдера */
  93.     position: absolute;
  94.     width: 50%;
  95.     bottom: 10%;
  96.     left: 15%;
  97.     color: #fff;
  98.     font-family: arial;
  99.     z-index: 3;
  100. }
  101.  
  102. .slide-text-title { /* Заголовок */
  103.     padding: 0 10px;
  104.     color: #fff;
  105.     }
  106.     .slide-text-title a{
  107.         text-decoration: none;
  108.         color: #fff;
  109.     }
  110.  
  111. .slide-text-desc { /* Описание */
  112.     padding: 0 10px;
  113. }

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

2. Создаём скрипт

Поведение слайдера, а так же его реакция на курсор прописана именно здесь. JL-Slider состоит из четырёх изображений, плавно сменяющих друг друга и кнопок для навигации. Так же присутствуют две области «Preview» и «Next» по бокам слайдера для удобства перелистывания. Если навести курсор, то он остановится.

Создаём файл jl-slider.js с таким кодом:

jQuery код:
  1. (function ($) {
  2. var jlSlideSpeed = 1000; //Скорость анимации перехода.
  3. var jlTimeOut = 5000; //Время до автоматического перелистывания.
  4. var jlNeedLinks = true; //Включает или отключает показ ссылок "следующий - предыдущий". Значения true или false.
  5.  
  6. $(document).ready(function(e) {
  7.     $('.slide').css(
  8.         {"position" : "absolute",
  9.          "top":'0', "left": '0'}).hide().eq(0).show();
  10.     var slideNum = 0;
  11.     var slideTime;
  12.     slideCount = $("#slider .slide").size();
  13.     var animSlide = function(arrow){
  14.         clearTimeout(slideTime);
  15.         $('.slide').eq(slideNum).fadeOut(jlSlideSpeed);
  16.         if(arrow == "next"){
  17.             if(slideNum == (slideCount-1)){slideNum=0;}
  18.             else{slideNum++}
  19.             }
  20.         else if(arrow == "prew")
  21.         {
  22.             if(slideNum == 0){slideNum=slideCount-1;}
  23.             else{slideNum-=1}
  24.         }
  25.         else{
  26.             slideNum = arrow;
  27.             }
  28.         $('.slide').eq(slideNum).fadeIn(jlSlideSpeed, rotator);
  29.         $(".control-slide.active").removeClass("active");
  30.         $('.control-slide').eq(slideNum).addClass('active');
  31.         }
  32. if(jlNeedLinks){
  33. var $linkArrow = $('<a id="prewbutton" href="#">&amp;lt;</a><a id="nextbutton" href="#">&amp;gt;</a>')
  34.     .prependTo('#slider');        
  35.     $('#nextbutton').click(function(){
  36.         animSlide("next");
  37.         return false;
  38.         })
  39.     $('#prewbutton').click(function(){
  40.         animSlide("prew");
  41.         return false;
  42.         })
  43. }
  44.     var $adderSpan = '';
  45.     $('.slide').each(function(index) {
  46.             $adderSpan += '<span class = "control-slide">' + index + '</span>';
  47.         });
  48.     $('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
  49.     $(".control-slide:first").addClass("active");
  50.     $('.control-slide').click(function(){
  51.     var goToNum = parseFloat($(this).text());
  52.     animSlide(goToNum);
  53.     });
  54.     var pause = false;
  55.     var rotator = function(){
  56.             if(!pause){slideTime = setTimeout(function(){animSlide('next')}, jlTimeOut);}
  57.             }
  58.     $('#slider-wrap').hover(    
  59.         function(){clearTimeout(slideTime); pause = true;},
  60.         function(){pause = false; rotator();
  61.         });
  62.     rotator();
  63. });
  64. })(jQuery);

Бросаем его в …/templates/protostar/js/jl-slider.js.

Обратите внимание на 3 верхние строчки:

jQuery код:
  1. var jlSlideSpeed = 1000;
  2. var jlTimeOut = 5000;
  3. var jlNeedLinks = true;

1000 - это скорость анимации. Если поставить 0, то будет мгновенно перелистывать.
5000 - это время задержки, через 5 секунд сменить изображение. Рекомендую держаться в диапазоне от 4000 до 8000. Не будет казаться, что слишком долго или слишком быстро. Ну а если хочется, чтобы слайдер не переключал, установите слишком большое значение.

true - это означает, что ссылки по краям слайдера сейчас включены (можете поставить значение false, отключить). На нижние кнопки не влияет.

3. Создаём настройки в панели управления

Для создания настроек нам понадобиться файл templateDetails.xml. Его можно найти абсолютно в любом шаблоне для joomla. Но мы не станем мешать наши конфигурации от слайдера с теми, что по умолчанию стоят. Предлагаю добавить новую вкладку для настроек. Учитывая место, которое они занимают, это будет удобней. Вот как всё выглядит в итоге:

img 04

После, найти параметры можно будет здесь «Панель управления –> Расширения –> Менеджер шаблонов –> protostar – Default –> JL-Slider Config».

Для того чтобы создать отдельную вкладку нам потребуется в templateDetails.xml ещё один тег fieldset, но с другим именем. Именно он создаёт новую область, а всё что внутри может находиться, это различные типы полей.

templateDetails.xml ищите тут …/templates/protostar/templateDetails.xml. Открываем его через NotePad++ и пишем этот код внизу файла, перед закрывающимся тегом </fields>:

XML код:
  1. <fieldset name="Slider-Config" label="JL-Slider Config">
  2.     <field name="SliderYesNo" type="radio" default="0"
  3.         label="Показать JL-Slider на сайте?"
  4.         description="ДА - покажет, НЕТ - скроет. По умолчанию НЕТ.">
  5.         <option value="1">Да</option>
  6.         <option value="0">Нет</option>
  7.     </field>
  8.  
  9.     <field name="Slider-IMG1" class="" type="media" default=""
  10.         label="Установить изображение 1"
  11.         description="Вставить широкоформатную картинку для первого слайда." />
  12.     <field name="Slider-IMG2" class="" type="media" default=""
  13.         label="Установить изображение 2"
  14.         description="Вставить широкоформатную картинку для второго слайда." />
  15.     <field name="Slider-IMG3" class="" type="media" default=""
  16.         label="Установить изображение 3"
  17.         description="Вставить широкоформатную картинку для третьего слайда." />
  18.     <field name="Slider-IMG4" class="" type="media" default=""
  19.         label="Установить изображение 4"
  20.         description="Вставить широкоформатную картинку для четвёртого слайда." />
  21.  
  22.     <field name="JL-Slider-Title" type="text" default=""
  23.         label="Заголовок в слайдере"
  24.         description="Написать заголовок для слайдера."
  25.         filter="string" />
  26.     <field name="JL-Slider-Title-YESNO" type="radio" default="0"
  27.         label="Сделать заголовок ссылкой?"
  28.         description="ДА - сформирует ссылку на основании вставленного URL. НЕТ - покажет обычный заголовок. По умолчанию НЕТ.">
  29.         <option value="1">Да</option>
  30.         <option value="0">Нет</option>
  31.     </field>    
  32.     <field name="JL-Slider-Title-Link" type="url" default=""
  33.         label="Вставить ссылку"
  34.         description="Вставить ссылку для заголовка."
  35.         filter="string" />            
  36.     <field name="JL-Slider-Desc" type="textarea" default=""
  37.         label="Добавить описание"
  38.         description="Описание будет показано под заголовком."
  39.         filter="string" />
  40. </fieldset>

img 05

Сохраняем и бросаем обратно на сервер. Что мы сделали? Заключили опции в следующее:

XML код:
  1. <fieldset name="Slider-Config" label="JL-Slider Config">
  2.     ... код настроек
  3. </fieldset>

Благодаря чему, создалась дополнительная вкладка с именем JL-Slider Config. Теперь ещё раз взглянем на установленные нами параметры, я их опишу:

img 06

Показать JL-Slider нас сайте? - ДА - покажет, НЕТ - скроет. По умолчанию НЕТ.

Установить изображение 1-4 - Можно вставить из каталога или загрузить с компьютера. Я использовал те же картинки, что и при создании html. Расширение, неважно какое, даже неважен размер. Однако, при загрузке широкоформатного изображения, оно встанет в окошко удобнее для просмотра. Если не загрузить хотя бы одну картинку, то поле слайда просто останется пустым на сайте.

Заголовок в слайдере - обычный текст, которому присвоен тег <h2>. Если поле оставить пустым, то заголовок показан не будет.

Сделать заголовок ссылкой? - это радио кнопка с параметрами ДА/НЕТ. ДА - сформирует ссылку на основании вставленного URL. НЕТ - покажет обычный заголовок. По умолчанию установлено НЕТ.

Вставить ссылку - можно добавить ссылку вида http:// или https://, в противном случае принимать не будет (подробнее о том, как работает ЗАГОЛОВОК, КНОПКА и ССЫЛКА в 4 пункте).

Добавить описание - многострочное текстовое поле. Описание будет показано сразу после заголовка. Важно уточнить, область чёрного цвета под текстом, автоматически подстраивается в зависимости от количества слов.

Вы можете заполнить настройки перед последним пунктом.

4. Устанавливаем слайдер на сайте

Устанавливать слайдер мы будет в файл index.php шаблона protostar. Он находится …/templates/protostar/index.php. А место выберем подходящее, в верхней части страницы, сразу после класса body. Но для начала подробно рассмотрим код, каждую его часть по отдельности, а после выложу весь для вставки.

Сформировываем 4 ссылки для 4 изображений, присваиваем каждой переменную $, а при помощи полученных переменных выводим на странице.

PHP код:
  1. <!------- Формируем изображения ------->
  2. <?php
  3. if ($this->params->get('Slider-IMG1')){
  4.     $SliderIMG1 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG1') . '" />';}
  5. if ($this->params->get('Slider-IMG2')){
  6.     $SliderIMG2 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG2') . '" />';}
  7. if ($this->params->get('Slider-IMG3')){
  8.     $SliderIMG3 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG3') . '" />';}
  9. if ($this->params->get('Slider-IMG4')){
  10.     $SliderIMG4 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG4') . '" />';}
  11. ?>
  12. <!------- Показываем ------->
  13. <?php echo $SliderIMG1; ?>
  14. <?php echo $SliderIMG2; ?>
  15. <?php echo $SliderIMG3; ?>
  16. <?php echo $SliderIMG4; ?>

Дальше создаём заголовок.

PHP код:
  1. <!------- Присваиваем переменные для заголовка ------->
  2. <?php
  3. if ($this->params->get('JL-Slider-Title')){
  4.     $SliderTitle = '' . $this->params->get('JL-Slider-Title') . '';}
  5. if ($this->params->get('JL-Slider-Title-Link')){
  6.     $SliderTitleLink = '' . $this->params->get('JL-Slider-Title-Link') . '';}
  7. ?>
  8. <!------- Показываем заголовок ------->
  9. <?php
  10.     if ($this->params->get('JL-Slider-Title-YESNO')){
  11.         echo '<a href="' . $SliderTitleLink . '">' . $SliderTitle . '</a>';}
  12.     else {
  13.         echo $SliderTitle;}
  14. ?>

В первых двух условиях мы присваиваем: переменную $SliderTitle для заголовка, $SliderTitleLink для ссылки. А вывод делаем через третье условие: если радио кнопка JL-Slider-Title-YESNO имеет значение ДА, то показать ссылку, сформированную из $SliderTitle и $SliderTitleLink. Если кнопка имеет значение НЕТ, то выводить только $SliderTitle (т.е. текст заголовка). Логически всё правильно, человеку не придёт в голову устанавливать значение ДА в опциях, если не собирается вставлять URL страницы. Но если он не станет писать заголовок, вставит ссылку и выберет значение ДА, то ссылка всё же появится на странице. Однако так как она не имеет текста, никто её не увидит.

Подключаем скрипты:

HTML код:
  1. <!------- Подключаем скрипты ------->
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  3. <script type="text/javascript" src="<?php echo JURI::base (true); ?>/templates/protostar/js/jl-slider.js"></script>

Первая строчка подключает библиотеку jquery, а вторая наш скрипт, созданный ранее и находящийся в папке js (проверяйте путь до файла, если делаете на своём шаблоне). Осталось только обернуть наш слайдер в условие, благодаря которому мы сможет решать, показать на сайте или нет.

PHP код:
  1. <!------- Slider ------->
  2. <?php if ($this->params->get('SliderYesNo')) : ?>
  3.     ... код слайдера
  4. <?php endif; ?>

Лично я поступил следующим образом. Не стал подключать скрипты между тегами head, как это принято, а вставил между двумя строчками выше. Теперь, если в опциях отключить слайдер, то он исчезнет со страницы, а вместе с ним и подключённые скрипты. Это значит, что они не будут загружаться и тормозить наш сайт без надобности.

Настало время собрать весь код воедино и вставить его в файл index.php. Как и говорил раньше, сделаем это сразу после класса body:

PHP код:
  1. <!---------------- JL-Slider ---------------->
  2. <!------- Формируем изображения ------->
  3. <?php
  4. if ($this->params->get('Slider-IMG1')){
  5.     $SliderIMG1 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG1') . '" />';}
  6. if ($this->params->get('Slider-IMG2')){
  7.     $SliderIMG2 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG2') . '" />';}
  8. if ($this->params->get('Slider-IMG3')){
  9.     $SliderIMG3 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG3') . '" />';}
  10. if ($this->params->get('Slider-IMG4')){
  11.     $SliderIMG4 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG4') . '" />';}
  12. ?>
  13.  
  14. <!------- Присваиваем переменные для заголовка ------->
  15. <?php
  16. if ($this->params->get('JL-Slider-Title')){
  17.     $SliderTitle = '' . $this->params->get('JL-Slider-Title') . '';}
  18. if ($this->params->get('JL-Slider-Title-Link')){
  19.     $SliderTitleLink = '' . $this->params->get('JL-Slider-Title-Link') . '';}
  20. ?>
  21.  
  22. <!------- Slider ------->
  23. <?php if ($this->params->get('SliderYesNo')) : ?>
  24. <div id="slider-wrap">
  25.     <div id="slider">
  26.         <div>
  27.         <div></div>
  28.             <h2>
  29.             <?php
  30.                 if ($this->params->get('JL-Slider-Title-YESNO')){
  31.                     echo '<a href="' . $SliderTitleLink . '">' . $SliderTitle . '</a>';}
  32.                 else {
  33.                     echo $SliderTitle;}
  34.             ?>
  35.             </h2>
  36.             <p><?php echo $this->params->get('JL-Slider-Desc'); ?></p>
  37.         </div>
  38.         <div><?php echo $SliderIMG1; ?></div>
  39.         <div><?php echo $SliderIMG2; ?></div>
  40.         <div><?php echo $SliderIMG3; ?></div>
  41.         <div><?php echo $SliderIMG4; ?></div>
  42.     </div>
  43. </div>
  44.  
  45. <!------- Подключаем скрипты ------->
  46. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  47. <script type="text/javascript" src="<?php echo JURI::base (true); ?>/templates/protostar/js/jl-slider.js"></script>
  48. <?php endif; ?>
  49. <!---------------- JL-Slider ---------------->

img 07

Остаётся только сохранить изменения и вернуть файл на место с заменой. Если вы заполняли настройки в пункте 3, то должны будете увидеть:

img 08

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

HTML код:
  1. <div><img src="images/1.jpg"></div>
  2. <div><img src="images/2.jpg"></div>
  3. <div><img src="images/3.jpg"></div>
  4. <div><img src="images/4.jpg"></div>
  5. <div><img src="images/НОВАЯ-КАРТИНКА.jpg"></div>

Или это для шаблона Joomla:

PHP код:
  1. <div><?php echo $SliderIMG1; ?></div>
  2. <div><?php echo $SliderIMG2; ?></div>
  3. <div><?php echo $SliderIMG3; ?></div>
  4. <div><?php echo $SliderIMG4; ?></div>
  5. <div><?php echo $НОВАЯ-ПЕРЕМЕННАЯ; ?></div>

Главное не забудьте написать ещё один параметр в templateDetails.xml для загрузки изображения в случае с Joomla, а так же создайте дополнительную переменную в index.php. Добавите ли вы новые слайды или предпочтёте их удалить, работать слайдер от этого не перестанет.

Заключение

Внешне JL-Slider статичен, и если сделать сайт резиновым, то он не измениться. Но вы всегда можете поправить таблицу стилей под свой ресурс. Заголовок и описание специально не стал добавлять в скрипт. Считаю, что одна область с текстом куда информативней смотрится, чем четыре динамичные. По той же самой причине не стал писать возможность вставки ссылок для изображений. Ссылку предпочёл создать только для заголовка.

 
4.4784172661871 1 1 1 1 1 (Оценок: 278)
4.4784172661871 278
Опубликовано: 15-06-2016

Соседние материалы

< Назад Вперёд >

Комментарии  

Иван
0 #1 Иван 16.04.2017 06:13
Спасибо большое,помогли справиться с возникшими вопросами при дизайне интернет магазина.

Вы не зарегистрированы, чтобы оставлять комментарии.