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

Carousel для Joomla

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

Для начала придётся создать несколько файлов, их мы разместим в папку с названием Carousel расположенной на рабочем столе. Это будут: index.html, styles.css, carousel.js. А также добавьте туда папку images. Вот как должно получиться у вас:

img 02

Файлы можно создать при помощи текстового редактора NotePad++, в нём же их пока и откройте. Теперь найдите восемь изображений в jpg, лучше взять широкоформатные и одного размера. На самом деле стили позволяют установить любую картинку (выравнивание идёт по высоте), но с одинаковым размером будет приятней смотреться, я выбрал 1920х1200px. Дайте им название по числовому порядку и бросайте в папку images.

img 03

Настало время заполнить файлы кодом. В index.html вставляем следующее, сохраняем:

HTML код:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Carousel</title>
  5. <!---------- Подключаем библиотеку jQuery и свой скрипт ----------->
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  7. <script type="text/javascript" src="carousel.js"></script>
  8. <!---------- Подключаем стили ----------->
  9. <link rel="stylesheet" type="text/css" href="styles.css">
  10. </head>
  11. <body>
  12.  
  13. <!---------- Carousel ----------->
  14. <div>
  15. <div><a href="#"></a></div>
  16. <div><a href="#"></a></div>
  17. <div>
  18. <div>
  19. <div>
  20. <img src="images/1.jpg"/>
  21. </div>
  22. <div>
  23. <img src="images/2.jpg"/>
  24. </div>
  25. <div>
  26. <img src="images/3.jpg"/>
  27. </div>
  28. <div>
  29. <img src="images/4.jpg"/>
  30. </div>
  31. <div>
  32. <img src="images/5.jpg"/>
  33. </div>
  34. <div>
  35. <img src="images/6.jpg"/>
  36. </div>
  37. <div>
  38. <img src="images/7.jpg"/>
  39. </div>
  40. <div>
  41. <img src="images/8.jpg"/>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46.  
  47. </body>
  48. </html>

Для carousel.js:

jQuery код:
  1. jQuery(document).on('click', ".carousel-button-right",function(){
  2. var carusel = jQuery(this).parents('.carousel');
  3. right_carusel(carusel);
  4. return false;
  5. });
  6. jQuery(document).on('click',".carousel-button-left",function(){
  7. var carusel = jQuery(this).parents('.carousel');
  8. left_carusel(carusel);
  9. return false;
  10. });
  11. function left_carusel(carusel){
  12. var block_width = jQuery(carusel).find('.carousel-block').outerWidth();
  13. jQuery(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo(jQuery(carusel).find(".carousel-items"));
  14. jQuery(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"});
  15. jQuery(carusel).find(".carousel-items .carousel-block").eq(-1).remove();
  16. jQuery(carusel).find(".carousel-items").animate({left: "0px"}, 200);
  17. }
  18. function right_carusel(carusel){
  19. var block_width = jQuery(carusel).find('.carousel-block').outerWidth();
  20. jQuery(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){
  21. jQuery(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo(jQuery(carusel).find(".carousel-items"));
  22. jQuery(carusel).find(".carousel-items .carousel-block").eq(0).remove();
  23. jQuery(carusel).find(".carousel-items").css({"left":"0px"});
  24. });
  25. }

И на конец, styles.css:

CSS код:
  1. body {
  2. background: #87adce;
  3. }
  4.  
  5. /* Carousel */
  6. .carousel {
  7. max-width: 1080px;
  8. margin: 100px auto;
  9. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
  10. height: 195px;
  11. background: #f7f7f7;
  12. border-radius: 5px;
  13. }
  14. .carousel-wrapper {
  15. margin: 10px 30px;
  16. overflow: hidden;
  17. position:relative;
  18. }
  19. .carousel-items {
  20. width: 10000px;
  21. position: relative;
  22. height: 185px;
  23. overflow: hidden
  24. }
  25. .carousel-block {
  26. float: left;
  27. padding: 10px 10px 10px 0px;
  28. position: relative;
  29. width: auto;
  30. height: 165px;
  31. overflow: hidden;
  32. }
  33. .carousel-block img{
  34. display: block;
  35. width: auto;
  36. height: 175px;
  37. }
  38.  
  39. /* BUTTONS */
  40. .carousel-button-left a, .carousel-button-right a{
  41. width: 25px;
  42. height: 36px;
  43. position: relative;
  44. cursor: pointer;
  45. text-decoration:none;
  46. }
  47. .carousel-button-left a{
  48. float: left;
  49. background: #d8d8d8;
  50. width: 28px;
  51. height: 195px;
  52. border-radius: 5px 0 0 5px;
  53. }
  54. .carousel-button-right a{
  55. float: right;
  56. background: #d8d8d8;
  57. width: 28px;
  58. height: 195px;
  59. border-radius: 0 5px 5px 0;
  60. }

Осталось только открыть наш файл index в браузере. Посмотреть ДЕМО.

И так, что же эта карусель умеет. Она подстраивается под разрешение экрана и содержит по бокам две области для перелистывания изображений. Прокручиваться может в обе стороны и если нажать налево, то после первой по очереди идёт восьмая. Кстати, как и говорил выше, все картинки выравниваются по высоте.

Лучше всего такой элемент дизайна подходит для собственной галереи или портфолио. При создании галереи понадобятся дополнительные стили и скрипт, чтобы картинка красиво всплывала на передний фон, но это возможно рассмотрим в следующий раз. А вот для портфолио карусель подходит хорошо, мы сможем ссылаться на какой либо контент нашего сайта. Поэтому давайте перенесём её в стандартный шаблон protostar от joomla 3.5.х и сделаем так, чтобы изображения можно было загружать через панель управления. Уменьшим количество картинок и добавим возможность установки ссылок на них.

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

1. Сначала создадим настройки в менеджере шаблонов, а сделаем это так, чтобы наши конфигурации были в отдельной вкладке. Добавим туда основную кнопку, благодаря которой можно будет выбирать, показывать карусель на сайте или нет. Ещё будут 6 полей для загрузки изображения и 6 для вставки ссылок. А сделать это можно благодаря вот этому коду:

XML код:
  1. <fieldset name="Carousel-Config" label="Carousel Config">
  2. <field name="CarouselYesNo" type="radio" default="0"
  3. label="Показать Carousel на сайте?"
  4. description="ДА - покажет, НЕТ - скроет. По умолчанию НЕТ.">
  5. <option value="1">Да</option>
  6. <option value="0">Нет</option>
  7. </field>
  8.  
  9. <field name="Carousel-IMG1" class="" type="media" default=""
  10. label="Установить изображение 1"
  11. description="Вставить картинку на позицию 1." />
  12. <field name="Carousel-Link1" type="url" default=""
  13. label="Вставить ссылку 1"
  14. description="Сделает изображение 1 ссылкой."
  15. filter="string" />
  16. <field name="Carousel-IMG2" class="" type="media" default=""
  17. label="Установить изображение 2"
  18. description="Вставить картинку на позицию 2." />
  19. <field name="Carousel-Link2" type="url" default=""
  20. label="Вставить ссылку 2"
  21. description="Сделает изображение 2 ссылкой."
  22. filter="string" />
  23. <field name="Carousel-IMG3" class="" type="media" default=""
  24. label="Установить изображение 3"
  25. description="Вставить картинку на позицию 3." />
  26. <field name="Carousel-Link3" type="url" default=""
  27. label="Вставить ссылку 3"
  28. description="Сделает изображение 3 ссылкой."
  29. filter="string" />
  30. <field name="Carousel-IMG4" class="" type="media" default=""
  31. label="Установить изображение 4"
  32. description="Вставить картинку на позицию 4." />
  33. <field name="Carousel-Link4" type="url" default=""
  34. label="Вставить ссылку 4"
  35. description="Сделает изображение 4 ссылкой."
  36. filter="string" />
  37. <field name="Carousel-IMG5" class="" type="media" default=""
  38. label="Установить изображение 5"
  39. description="Вставить картинку на позицию 5." />
  40. <field name="Carousel-Link5" type="url" default=""
  41. label="Вставить ссылку 5"
  42. description="Сделает изображение 5 ссылкой."
  43. filter="string" />
  44. <field name="Carousel-IMG6" class="" type="media" default=""
  45. label="Установить изображение 6"
  46. description="Вставить картинку на позицию 6." />
  47. <field name="Carousel-Link6" type="url" default=""
  48. label="Вставить ссылку 6"
  49. description="Сделает изображение 6 ссылкой."
  50. filter="string" />
  51. </fieldset>

Вставить его требуется в файл templateDetails.xml нашего шаблона между тегами <fields></fields>. Добавьте в самом конце. На изображении показано как следует вставлять:

img 04

Впоследствии, найти параметры можно будет в менеджере шаблонов, открыв стили (в моём случае protostar). Выглядеть они будут так:

img 05

Показать Carousel на сайте? - при выборе значения ДА, карусель отобразиться, НЕТ - будет скрыта. По умолчанию установлено НЕТ.

Установить изображение 1-6 - шесть полей для загрузки изображений. Вставлять лучше одинакового размера, как писал в первом примере. Но вы можете брать любого формата и разрешения. Пропускать поля можно, карусель будет работать.

Вставить ссылку 1-6 - если оставить поле пустым, то изображению не будет присвоена ссылка (теги <a></a> не будут установлены). Вставлять в эти поля можно только ссылки.

2. Далее следует написать стили. Найдите в шаблоне файл template.css, он обычно расположен в папке css. Откройте и в самом низу вставляйте это:

CSS код:
  1. /* Carousel */
  2. .carousel {
  3. max-width: 920px;
  4. margin: 0px auto 30px;
  5. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
  6. height: 195px;
  7. background: #f7f7f7;
  8. border-radius: 5px;
  9. }
  10. .carousel-wrapper {
  11. margin: 10px 30px;
  12. overflow: hidden;
  13. position:relative;
  14. }
  15. .carousel-items {
  16. width: 10000px;
  17. position: relative;
  18. height: 185px;
  19. overflow: hidden
  20. }
  21. .carousel-block {
  22. float: left;
  23. padding: 10px 10px 10px 0px;
  24. position: relative;
  25. width: auto;
  26. height: 165px;
  27. overflow: hidden;
  28. }
  29. .carousel-block img{
  30. display: block;
  31. width: auto;
  32. height: 175px;
  33. }
  34.  
  35. /* BUTTONS */
  36. .carousel-button-left a, .carousel-button-right a{
  37. width: 25px;
  38. height: 36px;
  39. position: relative;
  40. cursor: pointer;
  41. text-decoration:none;
  42. }
  43. .carousel-button-left a{
  44. float: left;
  45. background: #d8d8d8;
  46. width: 28px;
  47. height: 195px;
  48. border-radius: 5px 0 0 5px;
  49. }
  50. .carousel-button-right a{
  51. float: right;
  52. background: #d8d8d8;
  53. width: 28px;
  54. height: 195px;
  55. border-radius: 0 5px 5px 0;
  56. }

Здесь изменена максимальная ширина и отступ.

3. Создаём скрипт для работы карусели и расположим его в папке js шаблона. Как и в первом примере на HTML, необходимо создать файл carousel.js и написать в нём тот же самый код. Вот ещё раз он:

jQuery код:
  1. jQuery(document).on('click', ".carousel-button-right",function(){
  2. var carusel = jQuery(this).parents('.carousel');
  3. right_carusel(carusel);
  4. return false;
  5. });
  6. jQuery(document).on('click',".carousel-button-left",function(){
  7. var carusel = jQuery(this).parents('.carousel');
  8. left_carusel(carusel);
  9. return false;
  10. });
  11. function left_carusel(carusel){
  12. var block_width = jQuery(carusel).find('.carousel-block').outerWidth();
  13. jQuery(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo(jQuery(carusel).find(".carousel-items"));
  14. jQuery(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"});
  15. jQuery(carusel).find(".carousel-items .carousel-block").eq(-1).remove();
  16. jQuery(carusel).find(".carousel-items").animate({left: "0px"}, 200);
  17. }
  18. function right_carusel(carusel){
  19. var block_width = jQuery(carusel).find('.carousel-block').outerWidth();
  20. jQuery(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){
  21. jQuery(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo(jQuery(carusel).find(".carousel-items"));
  22. jQuery(carusel).find(".carousel-items .carousel-block").eq(0).remove();
  23. jQuery(carusel).find(".carousel-items").css({"left":"0px"});
  24. });
  25. }

4. Осталось только установить php код в нужно месте. Открываем index.php и находим подходящее место в верхней части страницы. Лично у меня будет сразу после класса body, где то на 140 строчке:

img 06

А вот то, что необходимо туда прописать:

PHP код:
  1. <!---------------- Carousel ---------------->
  2. <?php
  3. if ($this->params->get('Carousel-IMG1')){
  4. $CarouselIMG1 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG1') . '" />';}
  5. if ($this->params->get('Carousel-IMG2')){
  6. $CarouselIMG2 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG2') . '" />';}
  7. if ($this->params->get('Carousel-IMG3')){
  8. $CarouselIMG3 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG3') . '" />';}
  9. if ($this->params->get('Carousel-IMG4')){
  10. $CarouselIMG4 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG4') . '" />';}
  11. if ($this->params->get('Carousel-IMG5')){
  12. $CarouselIMG5 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG5') . '" />';}
  13. if ($this->params->get('Carousel-IMG6')){
  14. $CarouselIMG6 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG6') . '" />';}
  15. ?>
  16. <?php if ($this->params->get('CarouselYesNo')) : ?>
  17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  18. <script type="text/javascript" src="<?php echo JURI::base (true); ?>/templates/protostar/js/carousel.js"></script>
  19. <div>
  20. <div><a href="#"></a></div>
  21. <div><a href="#"></a></div>
  22. <div>
  23. <div>
  24. <div>
  25. <?php if ($this->params->get('Carousel-Link1')){
  26. echo '<a href="' . $this->params->get('Carousel-Link1') . '">' . $CarouselIMG1 . '</a>';}
  27. else {
  28. echo $CarouselIMG1;} ?>
  29. </div>
  30. <div>
  31. <?php if ($this->params->get('Carousel-Link2')){
  32. echo '<a href="' . $this->params->get('Carousel-Link2') . '">' . $CarouselIMG2 . '</a>';}
  33. else {
  34. echo $CarouselIMG2;} ?>
  35. </div>
  36. <div>
  37. <?php if ($this->params->get('Carousel-Link3')){
  38. echo '<a href="' . $this->params->get('Carousel-Link3') . '">' . $CarouselIMG3 . '</a>';}
  39. else {
  40. echo $CarouselIMG3;} ?>
  41. </div>
  42. <div>
  43. <?php if ($this->params->get('Carousel-Link4')){
  44. echo '<a href="' . $this->params->get('Carousel-Link4') . '">' . $CarouselIMG4 . '</a>';}
  45. else {
  46. echo $CarouselIMG4;} ?>
  47. </div>
  48. <div>
  49. <?php if ($this->params->get('Carousel-Link5')){
  50. echo '<a href="' . $this->params->get('Carousel-Link5') . '">' . $CarouselIMG5 . '</a>';}
  51. else {
  52. echo $CarouselIMG5;} ?>
  53. </div>
  54. <div>
  55. <?php if ($this->params->get('Carousel-Link6')){
  56. echo '<a href="' . $this->params->get('Carousel-Link6') . '">' . $CarouselIMG6 . '</a>';}
  57. else {
  58. echo $CarouselIMG6;} ?>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <?php endif; ?>
  64. <!---------------- Carousel ---------------->

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

Carousel для Joomla 3

Давайте напоследок взглянем, что мы написали в index.php.

На основании наших настроек, вот так мы формируем изображения и присваиваем им разные переменные.

PHP код:
  1. <?php
  2. if ($this->params->get('Carousel-IMG1')){
  3. $CarouselIMG1 = '<img src="' . JUri::root() . $this->params->get('Carousel-IMG1') . '" />';}
  4. ?>

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

PHP код:
  1. <?php
  2. if ($this->params->get('Carousel-Link1')){
  3. echo '<a href="' . $this->params->get('Carousel-Link1') . '">' . $CarouselIMG1 . '</a>';}
  4. else {
  5. echo $CarouselIMG1;}
  6. ?>

В данном случае идёт проверка поля со ссылкой (Carousel-Link1). Если оно заполнено, то показывать изображение таким образом <a href=”наша ссылка”>картинка</a>. Если ссылки нет, показывать просто картинку ($CarouselIMG1).

Всю карусель вместе со скриптами мы заключили в функцию:

PHP код:
  1. <?php if ($this->params->get('CarouselYesNo')) : ?>
  2. ...Любой код
  3. <?php endif; ?>

Здесь определяется значение кнопки «Показать Carousel на сайте?».

Ну а последнее, это подключение jquery библиотеки и нашего скрипта в папке js (не забывайте проверять пути до файлов у себя).

HTML код:
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  2. <script type="text/javascript" src="<?php echo JURI::base (true); ?>/templates/protostar/js/carousel.js"></script>

Заключение

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


 
4.5054151624549 1 1 1 1 1 (Оценок: 277)
4.5054151624549 277
Опубликовано: 18-06-2016

Комментарии  

Богдан
0 #3 Богдан 21.04.2017 19:20
Вот то что я искал! Пытался сделать карусель на html для своего сайта но, что то не работало. Теперь с этим примером у меня точно получится!
Эльжбетта Задорожная
+1 #2 Эльжбетта Задорожная 29.11.2016 13:58
Как я довольна тем, что на просторах интернета попала на ваш сервис! Долго пыталась настроить карусель с мастер-классами , фото на своей страничке и теперь, благодаря такому подробному описанию у меня все получилось! Спасибо еще раз за такой полезный труд!
Виктор
0 #1 Виктор 26.11.2016 18:55
Следуя вашим описаниям у меня все получилось у самого с первого раза, сам очень поражен, расписано все просто и понятно, а главное все коды написаны и все показано на наглядном примере, что очень облегчает выполнения установок!!! Большое спасибо!!! Буду всем рекомендовать ваш сайт!!!

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