Создаём Carousel для Joomla своими руками
Чаще всего на просторах интернета встречается информация о том, как получить элемент дизайна при помощи Bootstrap. В действительности, этот набор инструментов, правда, очень удобен. В нём заложено много шаблонов для создания всего, от простой кнопки, до сложных объектов с красивой анимацией на CSS3. Но использовать его для шаблона Joomla ради всего одного дизайнерского решения, будет не совсем уместно. Поэтому создавать будем своими собственными силами, и займёмся на этот раз каруселью (Carousel). Карусель чем та похожа на слайдер, но имеет ряд внешних отличий. Как правило, она более вытянута в ширину и может содержать не только изображения, но и текст. Разберём один из вариантов создания карусели на HTML. Она будет содержать кнопки прокрутки и несколько изображений. После установим её в наш шаблон от Joomla 3.5.х и немного улучшим.
Пример 1. Carousel на HTML.
Для начала придётся создать несколько файлов, их мы разместим в папку с названием Carousel расположенной на рабочем столе. Это будут: index.html, styles.css, carousel.js. А также добавьте туда папку images. Вот как должно получиться у вас:
Файлы можно создать при помощи текстового редактора NotePad++, в нём же их пока и откройте. Теперь найдите восемь изображений в jpg, лучше взять широкоформатные и одного размера. На самом деле стили позволяют установить любую картинку (выравнивание идёт по высоте), но с одинаковым размером будет приятней смотреться, я выбрал 1920х1200px. Дайте им название по числовому порядку и бросайте в папку images.
Настало время заполнить файлы кодом. В index.html вставляем следующее, сохраняем:
HTML код:
<!DOCTYPE html> <html> <head> <title>Carousel</title> <!---------- Подключаем библиотеку jQuery и свой скрипт -----------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="carousel.js"></script> <!---------- Подключаем стили -----------> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <!---------- Carousel -----------> <div> <div><a href="#"></a></div> <div><a href="#"></a></div> <div> <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> <img src="images/5.jpg"/> </div> <div> <img src="images/6.jpg"/> </div> <div> <img src="images/7.jpg"/> </div> <div> <img src="images/8.jpg"/> </div> </div> </div> </div> </body> </html>
Для carousel.js:
jQuery код:
jQuery(document).on('click', ".carousel-button-right",function(){ var carusel = jQuery(this).parents('.carousel'); right_carusel(carusel); return false; }); jQuery(document).on('click',".carousel-button-left",function(){ var carusel = jQuery(this).parents('.carousel'); left_carusel(carusel); return false; }); function left_carusel(carusel){ var block_width = jQuery(carusel).find('.carousel-block').outerWidth(); jQuery(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo(jQuery(carusel).find(".carousel-items")); jQuery(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"}); jQuery(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); jQuery(carusel).find(".carousel-items").animate({left: "0px"}, 200); } function right_carusel(carusel){ var block_width = jQuery(carusel).find('.carousel-block').outerWidth(); jQuery(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){ jQuery(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo(jQuery(carusel).find(".carousel-items")); jQuery(carusel).find(".carousel-items .carousel-block").eq(0).remove(); jQuery(carusel).find(".carousel-items").css({"left":"0px"}); }); }
И на конец, styles.css:
CSS код:
body { background: #87adce; } /* Carousel */ .carousel { max-width: 1080px; margin: 100px auto; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); height: 195px; background: #f7f7f7; border-radius: 5px; } .carousel-wrapper { margin: 10px 30px; overflow: hidden; position:relative; } .carousel-items { width: 10000px; position: relative; height: 185px; overflow: hidden } .carousel-block { float: left; padding: 10px 10px 10px 0px; position: relative; width: auto; height: 165px; overflow: hidden; } .carousel-block img{ display: block; width: auto; height: 175px; } /* BUTTONS */ .carousel-button-left a, .carousel-button-right a{ width: 25px; height: 36px; position: relative; cursor: pointer; text-decoration:none; } .carousel-button-left a{ float: left; background: #d8d8d8; width: 28px; height: 195px; border-radius: 5px 0 0 5px; } .carousel-button-right a{ float: right; background: #d8d8d8; width: 28px; height: 195px; border-radius: 0 5px 5px 0; }
Осталось только открыть наш файл index в браузере. Посмотреть ДЕМО.
И так, что же эта карусель умеет. Она подстраивается под разрешение экрана и содержит по бокам две области для перелистывания изображений. Прокручиваться может в обе стороны и если нажать налево, то после первой по очереди идёт восьмая. Кстати, как и говорил выше, все картинки выравниваются по высоте.
Лучше всего такой элемент дизайна подходит для собственной галереи или портфолио. При создании галереи понадобятся дополнительные стили и скрипт, чтобы картинка красиво всплывала на передний фон, но это возможно рассмотрим в следующий раз. А вот для портфолио карусель подходит хорошо, мы сможем ссылаться на какой либо контент нашего сайта. Поэтому давайте перенесём её в стандартный шаблон protostar от joomla 3.5.х и сделаем так, чтобы изображения можно было загружать через панель управления. Уменьшим количество картинок и добавим возможность установки ссылок на них.
Пример 2. Carousel для Joomla.
1. Сначала создадим настройки в менеджере шаблонов, а сделаем это так, чтобы наши конфигурации были в отдельной вкладке. Добавим туда основную кнопку, благодаря которой можно будет выбирать, показывать карусель на сайте или нет. Ещё будут 6 полей для загрузки изображения и 6 для вставки ссылок. А сделать это можно благодаря вот этому коду:
XML код:
<fieldset name="Carousel-Config" label="Carousel Config"> <field name="CarouselYesNo" type="radio" default="0" label="Показать Carousel на сайте?" description="ДА - покажет, НЕТ - скроет. По умолчанию НЕТ."> <option value="1">Да</option> <option value="0">Нет</option> </field> <field name="Carousel-IMG1" class="" type="media" default="" label="Установить изображение 1" description="Вставить картинку на позицию 1." /> <field name="Carousel-Link1" type="url" default="" label="Вставить ссылку 1" description="Сделает изображение 1 ссылкой." filter="string" /> <field name="Carousel-IMG2" class="" type="media" default="" label="Установить изображение 2" description="Вставить картинку на позицию 2." /> <field name="Carousel-Link2" type="url" default="" label="Вставить ссылку 2" description="Сделает изображение 2 ссылкой." filter="string" /> <field name="Carousel-IMG3" class="" type="media" default="" label="Установить изображение 3" description="Вставить картинку на позицию 3." /> <field name="Carousel-Link3" type="url" default="" label="Вставить ссылку 3" description="Сделает изображение 3 ссылкой." filter="string" /> <field name="Carousel-IMG4" class="" type="media" default="" label="Установить изображение 4" description="Вставить картинку на позицию 4." /> <field name="Carousel-Link4" type="url" default="" label="Вставить ссылку 4" description="Сделает изображение 4 ссылкой." filter="string" /> <field name="Carousel-IMG5" class="" type="media" default="" label="Установить изображение 5" description="Вставить картинку на позицию 5." /> <field name="Carousel-Link5" type="url" default="" label="Вставить ссылку 5" description="Сделает изображение 5 ссылкой." filter="string" /> <field name="Carousel-IMG6" class="" type="media" default="" label="Установить изображение 6" description="Вставить картинку на позицию 6." /> <field name="Carousel-Link6" type="url" default="" label="Вставить ссылку 6" description="Сделает изображение 6 ссылкой." filter="string" /> </fieldset>
Вставить его требуется в файл templateDetails.xml нашего шаблона между тегами <fields></fields>. Добавьте в самом конце. На изображении показано как следует вставлять:
Впоследствии, найти параметры можно будет в менеджере шаблонов, открыв стили (в моём случае protostar). Выглядеть они будут так:
Показать Carousel на сайте? - при выборе значения ДА, карусель отобразиться, НЕТ - будет скрыта. По умолчанию установлено НЕТ.
Установить изображение 1-6 - шесть полей для загрузки изображений. Вставлять лучше одинакового размера, как писал в первом примере. Но вы можете брать любого формата и разрешения. Пропускать поля можно, карусель будет работать.
Вставить ссылку 1-6 - если оставить поле пустым, то изображению не будет присвоена ссылка (теги <a></a> не будут установлены). Вставлять в эти поля можно только ссылки.
2. Далее следует написать стили. Найдите в шаблоне файл template.css, он обычно расположен в папке css. Откройте и в самом низу вставляйте это:
CSS код:
/* Carousel */ .carousel { max-width: 920px; margin: 0px auto 30px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); height: 195px; background: #f7f7f7; border-radius: 5px; } .carousel-wrapper { margin: 10px 30px; overflow: hidden; position:relative; } .carousel-items { width: 10000px; position: relative; height: 185px; overflow: hidden } .carousel-block { float: left; padding: 10px 10px 10px 0px; position: relative; width: auto; height: 165px; overflow: hidden; } .carousel-block img{ display: block; width: auto; height: 175px; } /* BUTTONS */ .carousel-button-left a, .carousel-button-right a{ width: 25px; height: 36px; position: relative; cursor: pointer; text-decoration:none; } .carousel-button-left a{ float: left; background: #d8d8d8; width: 28px; height: 195px; border-radius: 5px 0 0 5px; } .carousel-button-right a{ float: right; background: #d8d8d8; width: 28px; height: 195px; border-radius: 0 5px 5px 0; }
Здесь изменена максимальная ширина и отступ.
3. Создаём скрипт для работы карусели и расположим его в папке js шаблона. Как и в первом примере на HTML, необходимо создать файл carousel.js и написать в нём тот же самый код. Вот ещё раз он:
jQuery код:
jQuery(document).on('click', ".carousel-button-right",function(){ var carusel = jQuery(this).parents('.carousel'); right_carusel(carusel); return false; }); jQuery(document).on('click',".carousel-button-left",function(){ var carusel = jQuery(this).parents('.carousel'); left_carusel(carusel); return false; }); function left_carusel(carusel){ var block_width = jQuery(carusel).find('.carousel-block').outerWidth(); jQuery(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo(jQuery(carusel).find(".carousel-items")); jQuery(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"}); jQuery(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); jQuery(carusel).find(".carousel-items").animate({left: "0px"}, 200); } function right_carusel(carusel){ var block_width = jQuery(carusel).find('.carousel-block').outerWidth(); jQuery(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){ jQuery(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo(jQuery(carusel).find(".carousel-items")); jQuery(carusel).find(".carousel-items .carousel-block").eq(0).remove(); jQuery(carusel).find(".carousel-items").css({"left":"0px"}); }); }
4. Осталось только установить php код в нужно месте. Открываем index.php и находим подходящее место в верхней части страницы. Лично у меня будет сразу после класса body, где то на 140 строчке:
А вот то, что необходимо туда прописать:
PHP код:
<!---------------- Carousel ----------------> <?php if ($this->params->get('Carousel-IMG1')){ $CarouselIMG1 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG1') . '" />';} if ($this->params->get('Carousel-IMG2')){ $CarouselIMG2 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG2') . '" />';} if ($this->params->get('Carousel-IMG3')){ $CarouselIMG3 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG3') . '" />';} if ($this->params->get('Carousel-IMG4')){ $CarouselIMG4 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG4') . '" />';} if ($this->params->get('Carousel-IMG5')){ $CarouselIMG5 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG5') . '" />';} if ($this->params->get('Carousel-IMG6')){ $CarouselIMG6 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG6') . '" />';} ?> <?php if ($this->params->get('CarouselYesNo')) : ?> <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/carousel.js"></script> <div> <div><a href="#"></a></div> <div><a href="#"></a></div> <div> <div> <div> <?php if ($this->params->get('Carousel-Link1')){ echo '<a href="' . $this->params->get('Carousel-Link1') . '">' . $CarouselIMG1 . '</a>';} else { echo $CarouselIMG1;} ?> </div> <div> <?php if ($this->params->get('Carousel-Link2')){ echo '<a href="' . $this->params->get('Carousel-Link2') . '">' . $CarouselIMG2 . '</a>';} else { echo $CarouselIMG2;} ?> </div> <div> <?php if ($this->params->get('Carousel-Link3')){ echo '<a href="' . $this->params->get('Carousel-Link3') . '">' . $CarouselIMG3 . '</a>';} else { echo $CarouselIMG3;} ?> </div> <div> <?php if ($this->params->get('Carousel-Link4')){ echo '<a href="' . $this->params->get('Carousel-Link4') . '">' . $CarouselIMG4 . '</a>';} else { echo $CarouselIMG4;} ?> </div> <div> <?php if ($this->params->get('Carousel-Link5')){ echo '<a href="' . $this->params->get('Carousel-Link5') . '">' . $CarouselIMG5 . '</a>';} else { echo $CarouselIMG5;} ?> </div> <div> <?php if ($this->params->get('Carousel-Link6')){ echo '<a href="' . $this->params->get('Carousel-Link6') . '">' . $CarouselIMG6 . '</a>';} else { echo $CarouselIMG6;} ?> </div> </div> </div> </div> <?php endif; ?> <!---------------- Carousel ---------------->
Заключительным действием станет заполнение параметров из пункта один, а после можно будет проверять выполненную работу на своём сайте.
Давайте напоследок взглянем, что мы написали в index.php.
На основании наших настроек, вот так мы формируем изображения и присваиваем им разные переменные.
PHP код:
<?php if ($this->params->get('Carousel-IMG1')){ $CarouselIMG1 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG1') . '" />';} ?>
При помощи полученных переменных определяем, как будет выводиться изображение. Для этого необходимо создать функцию if, она будет проверять, какое поле в настройках заполнено, а какое нет и на основании этого показывать результат.
PHP код:
<?php if ($this->params->get('Carousel-Link1')){ echo '<a href="' . $this->params->get('Carousel-Link1') . '">' . $CarouselIMG1 . '</a>';} else { echo $CarouselIMG1;} ?>
В данном случае идёт проверка поля со ссылкой (Carousel-Link1). Если оно заполнено, то показывать изображение таким образом <a href=”наша ссылка”>картинка</a>
. Если ссылки нет, показывать просто картинку ($CarouselIMG1).
Всю карусель вместе со скриптами мы заключили в функцию:
PHP код:
<?php if ($this->params->get('CarouselYesNo')) : ?> ...Любой код <?php endif; ?>
Здесь определяется значение кнопки «Показать Carousel на сайте?».
Ну а последнее, это подключение jquery библиотеки и нашего скрипта в папке js (не забывайте проверять пути до файлов у себя).
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/carousel.js"></script>
Заключение
Из рассмотренных выше примеров можно легко понять, что карусель создана достаточно просто. Вы можете легко увеличить или уменьшить количество используемых изображений самостоятельно. Ну а те, кто хорошо знаете языки, им не составит проблем переделать эту карусель во что-то серьёзное. Вместо изображений могут быть, к примеру, последние или популярные посты на сайте. А для онлайн магазина, такой элемент дизайна может быть использован для демонстрации партнёров. Примеров великое множество, все зависит от воображения.
Соседние материалы | ||||
Делаем главную страницу Joomla шаблона уникальной | Создаём JL-Slider для Joomla своими руками |
Комментарии