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

Чаще всего на просторах интернета встречается информация о том, как получить элемент дизайна при помощи Bootstrap. В действительности, этот набор инструментов, правда, очень удобен. В нём заложено много шаблонов для создания всего, от простой кнопки, до сложных объектов с красивой анимацией на CSS3. Но использовать его для шаблона Joomla ради всего одного дизайнерского решения, будет не совсем уместно. Поэтому создавать будем своими собственными силами, и займёмся на этот раз каруселью (Carousel). Карусель чем та похожа на слайдер, но имеет ряд внешних отличий. Как правило, она более вытянута в ширину и может содержать не только изображения, но и текст. Разберём один из вариантов создания карусели на HTML. Она будет содержать кнопки прокрутки и несколько изображений. После установим её в наш шаблон от Joomla 3.5.х и немного улучшим.

Carousel для Joomla

Пример 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 ---------------->

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

Carousel для Joomla 3

Давайте напоследок взглянем, что мы написали в 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>

Заключение

Из рассмотренных выше примеров можно легко понять, что карусель создана достаточно просто. Вы можете легко увеличить или уменьшить количество используемых изображений самостоятельно. Ну а те, кто хорошо знаете языки, им не составит проблем переделать эту карусель во что-то серьёзное. Вместо изображений могут быть, к примеру, последние или популярные посты на сайте. А для онлайн магазина, такой элемент дизайна может быть использован для демонстрации партнёров. Примеров великое множество, все зависит от воображения.

4.4878048780488 1 1 1 1 1 (Оценок: 246)

Опубликовано: 18-06-2016

Соседние материалы
	Делаем главную страницу Joomla шаблона уникальной		Создаём JL-Slider для Joomla своими руками

Как я довольна тем, что на просторах интернета попала на ваш сервис! Долго пыталась настроить карусель с мастер-классами , фото на своей страничке и теперь, благодаря такому подробному описанию у меня все получилось! Спасибо еще раз за такой полезный труд!

0 #1 Виктор 26.11.2016 18:55

Следуя вашим описаниям у меня все получилось у самого с первого раза, сам очень поражен, расписано все просто и понятно, а главное все коды написаны и все показано на наглядном примере, что очень облегчает выполнения установок!!! Большое спасибо!!! Буду всем рекомендовать ваш сайт!!!

Обновить список комментариев

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

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

Пример 1. Carousel на HTML.

Пример 2. Carousel для Joomla.

Заключение

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

Комментарии

Документация

Информация

Войти

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

Пример 1. Carousel на HTML.

Пример 2. Carousel для Joomla.

Заключение

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

Комментарии

Документация

Информация