Создаём JL-Slider для Joomla своими руками
Многие из нас любят Joomla. Этот движок предлагает массу возможностей для создания любого сайта и с любым видом. Но, не смотря на очевидные плюсы, он всё же не лишён недостатков. Практически каждый администратор, если не все, при установке движка и шаблона, начинает доводить свой интернет проект до ума. Делают это при помощи расширений: плагинов, компонентов и модулей. Сайт становиться изящней, с визуальной точки зрения и приобретает необходимые возможности. Но лично мне есть, за что поругать этот движок. У медали, как говориться, две стороны:
Во-первых, расширяемость это хорошо. Однако подводных камней здесь предостаточно, к примеру, конфликт скриптов. Ставим компонент, а он не работает или ещё хуже, страница отказывается нормально открываться. К тому же, все мы знаем, как разработчики расширений любят делать свои творения платными. Наверное, больше половины всех расширений в интернете частично платные. Самые удобные и интересные возможности разработчики прячут и просят за них деньги.
Во-вторых, Joomla перегружена лишним. Она состоит из массы отдельных частей собранных в одном месте. Если вы зайдёте в «Панель управления –> Расширения –> Менеджер Расширений –> Управление», то увидите весь список того, что в движке находиться. Каждый из этих элементов имеет свою собственную строчку в базе данных и периодически обращается к ней, что парой сказывается на скорости открытия страниц. Стоит так же учесть информацию и скрипты, которые автоматически добавляются в начало страницы сайта. И если нам что-то не требуется для работы ресурса, придётся убирать. Если вы опытный, то никаких проблем, а если новичок, то местные настройки - это сущий ад.
Сегодня я предлагаю вам избежать две описанные выше проблемы. Мы создадим красивый элемент дизайна, который сможем легко настроить, а главное это бесплатно. Сделаем анимированный слайдер на HTML, а после внедрим его в стандартный шаблон protostar от Joomla 3.5.х. Имя дал ему простое - JL-Slider, работать он будет на jQuery.
Создаём JL-Slider на HTML
1. Для начала нам необходимо создать на рабочем столе папку с названием JL-Slider, внутри которой будет ещё одна папка images. Теперь, используя программу NotePad++, создадим дополнительно 3 файла - index.html, jl-slider.js, style.css. Откройте их в Notepad++ и пока не закрывайте.
Всё должно получиться так, как у меня на этой картинке:
2. Стили писал таким образом, чтобы широкоформатная картинка выравнивалась сверху по центру и подстраивалась по ширине слайдера. Поэтому находим в любом удобном для вас месте четыре изображения и бросаем их в папку images. Я взял 4 jpg с разрешением 1920x1200px. Но нечего страшного, если высота и ширина будут немного отличаться. На самом деле, таблицу стилей можно легко перестроить под свои нужды, а пока смотрим на мой пример:
Не забываем менять название на такое же, как на картинке.
3. В открытый файл index.html вставляем этот код и сохраняем:
HTML код:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JL-Slider</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="jl-slider.js"></script> </head> <body> <!------------ Слайдер ------------> <div id="slider-wrap"> <div id="slider"> <div> <div></div> <h2>Заголовок</h2> <p>Это динамический JL-Slider. В нём расположены 4 широкоформатных изображения и кнопки навигации. Так же присутствуют две области «Preview» и «Next» по бокам слайдера для удобства переключения картинок. Если навести курсор, то он остановится.</p> </div> <div><img src="images/1.jpg"></div> <div><img src="images/2.jpg"></div> <div><img src="images/3.jpg"></div> <div><img src="images/4.jpg"></div> </div> </div> <!------------ Слайдер ------------> </body> </html>
4. Теперь в style.css вставляем это:
CSS код:
body { background: #495267; } #slider-wrap { /* Оболочка слайдера и кнопок */ width: 900px; margin: 0 auto; } #slider { /* Оболочка слайдера */ width: auto; height: 500px; overflow: hidden; border: #f5f5f5 solid 10px; position: relative; } .slide { /* Слайд */ width: 100%; height: 100%; } .slide img { /* выравнивание картинки */ width: 100%; } .sli-links { /* Кнопки смены слайдов */ margin-top: -45px; text-align: center; } .sli-links .control-slide { margin: 5px; display: inline-block; text-indent: -9999px; opacity: 0.8; background: #eee; width: 16px; height: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px #000; } .sli-links .control-slide:hover { cursor: pointer; background-position: center center; } .sli-links .control-slide.active { background-position: center top; background: #a9a9a9; } #prewbutton { /* Ссылка "Педыдущий" */ display: block; width: 14%; height: 100%; position: absolute; top: 0; overflow: hidden; text-indent: -999px; background: #ddf1f1; opacity: 0; z-index: 3; outline: none !important; } #nextbutton { /* Ссылка "Следующий"*/ display: block; width: 14%; height: 100%; position: absolute; top: 0; overflow: hidden; text-indent: -999px; background: #ddf1f1; opacity: 0; z-index: 3; outline: none !important; right: 0px; } #prewbutton:hover, #nextbutton:hover { opacity: 0.4; } .slide-text-block { /* Прозрачная область под текстом */ position: absolute; z-index: -1; height: 100%; width: 100%; background: #000; opacity: 0.5; } .slide-text{ /* Текст внутри слайдера */ position: absolute; width: 50%; bottom: 10%; left: 15%; color: #fff; font-family: arial; z-index: 3; } .slide-text-title { /* Заголовок */ padding: 0 10px; } .slide-text-desc { /* Описание */ padding: 0 10px; }
5. И последнее, в jl-slider.js необходимо написать действия слайдера:
jQuery код:
(function ($) { var jlSlideSpeed = 1000; //Скорость анимации перехода. var jlTimeOut = 5000; //Время до автоматического перелистывания. var jlNeedLinks = true; //Включает или отключает показ ссылок "следующий - предыдущий". Значения true или false. $(document).ready(function(e) { $('.slide').css( {"position" : "absolute", "top":'0', "left": '0'}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow){ clearTimeout(slideTime); $('.slide').eq(slideNum).fadeOut(jlSlideSpeed); if(arrow == "next"){ if(slideNum == (slideCount-1)){slideNum=0;} else{slideNum++} } else if(arrow == "prew") { if(slideNum == 0){slideNum=slideCount-1;} else{slideNum-=1} } else{ slideNum = arrow; } $('.slide').eq(slideNum).fadeIn(jlSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $('.control-slide').eq(slideNum).addClass('active'); } if(jlNeedLinks){ var $linkArrow = $('<a id="prewbutton" href="#">&lt;</a><a id="nextbutton" href="#">&gt;</a>') .prependTo('#slider'); $('#nextbutton').click(function(){ animSlide("next"); return false; }) $('#prewbutton').click(function(){ animSlide("prew"); return false; }) } var $adderSpan = ''; $('.slide').each(function(index) { $adderSpan += '<span class = "control-slide">' + index + '</span>'; }); $('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap'); $(".control-slide:first").addClass("active"); $('.control-slide').click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide('next')}, jlTimeOut);} } $('#slider-wrap').hover( function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); rotator(); }); })(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 код:
/* JL-Slider */ #slider-wrap { /* Оболочка слайдера и кнопок */ width: 900px; margin: -15px auto 20px; } #slider { /* Оболочка слайдера */ width: auto; height: 500px; overflow: hidden; border: #e2e2e2 solid 10px; position: relative; } .slide { /* Слайд */ width: 100%; height: 100%; } .slide img { /* выравнивание картинки */ width: 100%; } .sli-links { /* Кнопки смены слайдов */ margin-top: -45px; text-align: center; } .sli-links .control-slide { margin: 5px; display: inline-block; text-indent: -9999px; opacity: 0.8; background: #eee; width: 16px; height: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px #000; } .sli-links .control-slide:hover { cursor: pointer; background-position: center center; } .sli-links .control-slide.active { background-position: center top; background: #a9a9a9; } #prewbutton { /* Ссылка "Педыдущий" */ display: block; width: 14%; height: 100%; position: absolute; top: 0; overflow: hidden; text-indent: -999px; background: #ddf1f1; opacity: 0; z-index: 3; outline: none !important; } #nextbutton { /* Ссылка "Следующий"*/ display: block; width: 14%; height: 100%; position: absolute; top: 0; overflow: hidden; text-indent: -999px; background: #ddf1f1; opacity: 0; z-index: 3; outline: none !important; right: 0px; } #prewbutton:hover, #nextbutton:hover { opacity: 0.4; } .slide-text-block { /* Прозрачная область под текстом */ position: absolute; z-index: -1; height: 100%; width: 100%; background: #000; opacity: 0.5; } .slide-text{ /* Текст внутри слайдера */ position: absolute; width: 50%; bottom: 10%; left: 15%; color: #fff; font-family: arial; z-index: 3; } .slide-text-title { /* Заголовок */ padding: 0 10px; color: #fff; } .slide-text-title a{ text-decoration: none; color: #fff; } .slide-text-desc { /* Описание */ padding: 0 10px; }
Здесь изменил общее расположение всего элемента, так как собираюсь устанавливать в верхней части страницы и добавил стили для заголовка. Если вставили, сохраняем и возвращаем на место.
2. Создаём скрипт
Поведение слайдера, а так же его реакция на курсор прописана именно здесь. JL-Slider состоит из четырёх изображений, плавно сменяющих друг друга и кнопок для навигации. Так же присутствуют две области «Preview» и «Next» по бокам слайдера для удобства перелистывания. Если навести курсор, то он остановится.
Создаём файл jl-slider.js с таким кодом:
jQuery код:
(function ($) { var jlSlideSpeed = 1000; //Скорость анимации перехода. var jlTimeOut = 5000; //Время до автоматического перелистывания. var jlNeedLinks = true; //Включает или отключает показ ссылок "следующий - предыдущий". Значения true или false. $(document).ready(function(e) { $('.slide').css( {"position" : "absolute", "top":'0', "left": '0'}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow){ clearTimeout(slideTime); $('.slide').eq(slideNum).fadeOut(jlSlideSpeed); if(arrow == "next"){ if(slideNum == (slideCount-1)){slideNum=0;} else{slideNum++} } else if(arrow == "prew") { if(slideNum == 0){slideNum=slideCount-1;} else{slideNum-=1} } else{ slideNum = arrow; } $('.slide').eq(slideNum).fadeIn(jlSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $('.control-slide').eq(slideNum).addClass('active'); } if(jlNeedLinks){ var $linkArrow = $('<a id="prewbutton" href="#">&lt;</a><a id="nextbutton" href="#">&gt;</a>') .prependTo('#slider'); $('#nextbutton').click(function(){ animSlide("next"); return false; }) $('#prewbutton').click(function(){ animSlide("prew"); return false; }) } var $adderSpan = ''; $('.slide').each(function(index) { $adderSpan += '<span class = "control-slide">' + index + '</span>'; }); $('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap'); $(".control-slide:first").addClass("active"); $('.control-slide').click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide('next')}, jlTimeOut);} } $('#slider-wrap').hover( function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); rotator(); }); })(jQuery);
Бросаем его в …/templates/protostar/js/jl-slider.js.
Обратите внимание на 3 верхние строчки:
jQuery код:
var jlSlideSpeed = 1000; var jlTimeOut = 5000; var jlNeedLinks = true;
1000 - это скорость анимации. Если поставить 0, то будет мгновенно перелистывать.
5000 - это время задержки, через 5 секунд сменить изображение. Рекомендую держаться в диапазоне от 4000 до 8000. Не будет казаться, что слишком долго или слишком быстро. Ну а если хочется, чтобы слайдер не переключал, установите слишком большое значение.
true - это означает, что ссылки по краям слайдера сейчас включены (можете поставить значение false, отключить). На нижние кнопки не влияет.
3. Создаём настройки в панели управления
Для создания настроек нам понадобиться файл templateDetails.xml. Его можно найти абсолютно в любом шаблоне для joomla. Но мы не станем мешать наши конфигурации от слайдера с теми, что по умолчанию стоят. Предлагаю добавить новую вкладку для настроек. Учитывая место, которое они занимают, это будет удобней. Вот как всё выглядит в итоге:
После, найти параметры можно будет здесь «Панель управления –> Расширения –> Менеджер шаблонов –> protostar – Default –> JL-Slider Config».
Для того чтобы создать отдельную вкладку нам потребуется в templateDetails.xml ещё один тег fieldset, но с другим именем. Именно он создаёт новую область, а всё что внутри может находиться, это различные типы полей.
templateDetails.xml ищите тут …/templates/protostar/templateDetails.xml. Открываем его через NotePad++ и пишем этот код внизу файла, перед закрывающимся тегом </fields>:
XML код:
<fieldset name="Slider-Config" label="JL-Slider Config"> <field name="SliderYesNo" type="radio" default="0" label="Показать JL-Slider на сайте?" description="ДА - покажет, НЕТ - скроет. По умолчанию НЕТ."> <option value="1">Да</option> <option value="0">Нет</option> </field> <field name="Slider-IMG1" class="" type="media" default="" label="Установить изображение 1" description="Вставить широкоформатную картинку для первого слайда." /> <field name="Slider-IMG2" class="" type="media" default="" label="Установить изображение 2" description="Вставить широкоформатную картинку для второго слайда." /> <field name="Slider-IMG3" class="" type="media" default="" label="Установить изображение 3" description="Вставить широкоформатную картинку для третьего слайда." /> <field name="Slider-IMG4" class="" type="media" default="" label="Установить изображение 4" description="Вставить широкоформатную картинку для четвёртого слайда." /> <field name="JL-Slider-Title" type="text" default="" label="Заголовок в слайдере" description="Написать заголовок для слайдера." filter="string" /> <field name="JL-Slider-Title-YESNO" type="radio" default="0" label="Сделать заголовок ссылкой?" description="ДА - сформирует ссылку на основании вставленного URL. НЕТ - покажет обычный заголовок. По умолчанию НЕТ."> <option value="1">Да</option> <option value="0">Нет</option> </field> <field name="JL-Slider-Title-Link" type="url" default="" label="Вставить ссылку" description="Вставить ссылку для заголовка." filter="string" /> <field name="JL-Slider-Desc" type="textarea" default="" label="Добавить описание" description="Описание будет показано под заголовком." filter="string" /> </fieldset>
Сохраняем и бросаем обратно на сервер. Что мы сделали? Заключили опции в следующее:
XML код:
<fieldset name="Slider-Config" label="JL-Slider Config"> ... код настроек </fieldset>
Благодаря чему, создалась дополнительная вкладка с именем JL-Slider Config. Теперь ещё раз взглянем на установленные нами параметры, я их опишу:
Показать JL-Slider нас сайте? - ДА - покажет, НЕТ - скроет. По умолчанию НЕТ.
Установить изображение 1-4 - Можно вставить из каталога или загрузить с компьютера. Я использовал те же картинки, что и при создании html. Расширение, неважно какое, даже неважен размер. Однако, при загрузке широкоформатного изображения, оно встанет в окошко удобнее для просмотра. Если не загрузить хотя бы одну картинку, то поле слайда просто останется пустым на сайте.
Заголовок в слайдере - обычный текст, которому присвоен тег <h2>. Если поле оставить пустым, то заголовок показан не будет.
Сделать заголовок ссылкой? - это радио кнопка с параметрами ДА/НЕТ. ДА - сформирует ссылку на основании вставленного URL. НЕТ - покажет обычный заголовок. По умолчанию установлено НЕТ.
Вставить ссылку - можно добавить ссылку вида http:// или https://, в противном случае принимать не будет (подробнее о том, как работает ЗАГОЛОВОК, КНОПКА и ССЫЛКА в 4 пункте).
Добавить описание - многострочное текстовое поле. Описание будет показано сразу после заголовка. Важно уточнить, область чёрного цвета под текстом, автоматически подстраивается в зависимости от количества слов.
Вы можете заполнить настройки перед последним пунктом.
4. Устанавливаем слайдер на сайте
Устанавливать слайдер мы будет в файл index.php шаблона protostar. Он находится …/templates/protostar/index.php. А место выберем подходящее, в верхней части страницы, сразу после класса body. Но для начала подробно рассмотрим код, каждую его часть по отдельности, а после выложу весь для вставки.
Сформировываем 4 ссылки для 4 изображений, присваиваем каждой переменную $, а при помощи полученных переменных выводим на странице.
PHP код:
<!------- Формируем изображения -------> <?php if ($this->params->get('Slider-IMG1')){ $SliderIMG1 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG1') . '" />';} if ($this->params->get('Slider-IMG2')){ $SliderIMG2 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG2') . '" />';} if ($this->params->get('Slider-IMG3')){ $SliderIMG3 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG3') . '" />';} if ($this->params->get('Slider-IMG4')){ $SliderIMG4 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG4') . '" />';} ?> <!------- Показываем -------> <?php echo $SliderIMG1; ?> <?php echo $SliderIMG2; ?> <?php echo $SliderIMG3; ?> <?php echo $SliderIMG4; ?>
Дальше создаём заголовок.
PHP код:
<!------- Присваиваем переменные для заголовка -------> <?php if ($this->params->get('JL-Slider-Title')){ $SliderTitle = '' . $this->params->get('JL-Slider-Title') . '';} if ($this->params->get('JL-Slider-Title-Link')){ $SliderTitleLink = '' . $this->params->get('JL-Slider-Title-Link') . '';} ?> <!------- Показываем заголовок -------> <?php if ($this->params->get('JL-Slider-Title-YESNO')){ echo '<a href="' . $SliderTitleLink . '">' . $SliderTitle . '</a>';} else { echo $SliderTitle;} ?>
В первых двух условиях мы присваиваем: переменную $SliderTitle для заголовка, $SliderTitleLink для ссылки. А вывод делаем через третье условие: если радио кнопка JL-Slider-Title-YESNO имеет значение ДА, то показать ссылку, сформированную из $SliderTitle и $SliderTitleLink. Если кнопка имеет значение НЕТ, то выводить только $SliderTitle (т.е. текст заголовка). Логически всё правильно, человеку не придёт в голову устанавливать значение ДА в опциях, если не собирается вставлять URL страницы. Но если он не станет писать заголовок, вставит ссылку и выберет значение ДА, то ссылка всё же появится на странице. Однако так как она не имеет текста, никто её не увидит.
Подключаем скрипты:
HTML код:
<!------- Подключаем скрипты -------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="<?php echo JURI::base (true); ?>/templates/protostar/js/jl-slider.js"></script>
Первая строчка подключает библиотеку jquery, а вторая наш скрипт, созданный ранее и находящийся в папке js (проверяйте путь до файла, если делаете на своём шаблоне). Осталось только обернуть наш слайдер в условие, благодаря которому мы сможет решать, показать на сайте или нет.
PHP код:
<!------- Slider -------> <?php if ($this->params->get('SliderYesNo')) : ?> ... код слайдера <?php endif; ?>
Лично я поступил следующим образом. Не стал подключать скрипты между тегами head, как это принято, а вставил между двумя строчками выше. Теперь, если в опциях отключить слайдер, то он исчезнет со страницы, а вместе с ним и подключённые скрипты. Это значит, что они не будут загружаться и тормозить наш сайт без надобности.
Настало время собрать весь код воедино и вставить его в файл index.php. Как и говорил раньше, сделаем это сразу после класса body:
PHP код:
<!---------------- JL-Slider ----------------> <!------- Формируем изображения -------> <?php if ($this->params->get('Slider-IMG1')){ $SliderIMG1 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG1') . '" />';} if ($this->params->get('Slider-IMG2')){ $SliderIMG2 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG2') . '" />';} if ($this->params->get('Slider-IMG3')){ $SliderIMG3 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG3') . '" />';} if ($this->params->get('Slider-IMG4')){ $SliderIMG4 = '<img src="' . JUri::root() . $this->params->get('Slider-IMG4') . '" />';} ?> <!------- Присваиваем переменные для заголовка -------> <?php if ($this->params->get('JL-Slider-Title')){ $SliderTitle = '' . $this->params->get('JL-Slider-Title') . '';} if ($this->params->get('JL-Slider-Title-Link')){ $SliderTitleLink = '' . $this->params->get('JL-Slider-Title-Link') . '';} ?> <!------- Slider -------> <?php if ($this->params->get('SliderYesNo')) : ?> <div id="slider-wrap"> <div id="slider"> <div> <div></div> <h2> <?php if ($this->params->get('JL-Slider-Title-YESNO')){ echo '<a href="' . $SliderTitleLink . '">' . $SliderTitle . '</a>';} else { echo $SliderTitle;} ?> </h2> <p><?php echo $this->params->get('JL-Slider-Desc'); ?></p> </div> <div><?php echo $SliderIMG1; ?></div> <div><?php echo $SliderIMG2; ?></div> <div><?php echo $SliderIMG3; ?></div> <div><?php echo $SliderIMG4; ?></div> </div> </div> <!------- Подключаем скрипты -------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="<?php echo JURI::base (true); ?>/templates/protostar/js/jl-slider.js"></script> <?php endif; ?> <!---------------- JL-Slider ---------------->
Остаётся только сохранить изменения и вернуть файл на место с заменой. Если вы заполняли настройки в пункте 3, то должны будете увидеть:
Так как скрипт и стили используются практически идентичные тем, что мы вставляли в HTML, то в оба варианта можно добавить дополнительные слайды. Просто допишите это в случае с HTML:
HTML код:
<div><img src="images/1.jpg"></div> <div><img src="images/2.jpg"></div> <div><img src="images/3.jpg"></div> <div><img src="images/4.jpg"></div> <div><img src="images/НОВАЯ-КАРТИНКА.jpg"></div>
Или это для шаблона Joomla:
PHP код:
<div><?php echo $SliderIMG1; ?></div> <div><?php echo $SliderIMG2; ?></div> <div><?php echo $SliderIMG3; ?></div> <div><?php echo $SliderIMG4; ?></div> <div><?php echo $НОВАЯ-ПЕРЕМЕННАЯ; ?></div>
Главное не забудьте написать ещё один параметр в templateDetails.xml для загрузки изображения в случае с Joomla, а так же создайте дополнительную переменную в index.php. Добавите ли вы новые слайды или предпочтёте их удалить, работать слайдер от этого не перестанет.
Заключение
Внешне JL-Slider статичен, и если сделать сайт резиновым, то он не измениться. Но вы всегда можете поправить таблицу стилей под свой ресурс. Заголовок и описание специально не стал добавлять в скрипт. Считаю, что одна область с текстом куда информативней смотрится, чем четыре динамичные. По той же самой причине не стал писать возможность вставки ссылок для изображений. Ссылку предпочёл создать только для заголовка.
Соседние материалы | ||||
Создаём Carousel для Joomla своими руками | Вывод полей из templateDetails.xml на Joomla сайте |
Комментарии