Создаём SlidingGallery для Joomla

Вы наверняка встречали эффект раздвижных шторок на просторах интернета. Это когда несколько изображений наложены друг на друга и если, навести курсор мыши на определённую картинку, то она открывается путём скрытия остальных. Так вот, этот эффект называется Accordion. Однако многие программисты его называют по-разному, так как вариаций такого эффекта очень много. Accordion бывает: вертикальным, горизонтальным, внутри может находится разного рода контент, при этом очень часто в основе его лежит скрипт. Иногда разработчики используют сложные скрипты и все возможности CSS3, а на выходе получают такой причудливый элемент дизайна, который назвать то сложно аккордеоном. Поэтому нет нечего удивительного в том, что встречается путаница в названиях. Ну а раз мы в нашем случае будем использоваться изображения, а создаваемый элемент станет частью визуального оформления, то думаю, стоит назвать его логически правильно - SlidingGallery (скользящая галерея). Всё-таки это будет настраиваемая галерея и анимированный аккордеон в одном флаконе.

SlidingGallery (скользящая галерея)

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

1 способ. Галерея при помощи HTML.

Особых сложностей этот способ не вызывает, а код можно использовать на любом сайте. И первое что потребуется сделать, это создать папку SlidingGallery на рабочем столе. Открываем программу Notepad++ и создаём файл index.html, после чего размещаем его в папке SlidingGallery. А последнее что потребуется, добавить ещё и папку img.

Вот как должно получиться:

Галерея при помощи HTML 1

Теперь найдите шесть широкоформатных изображений, главное чтобы все они были одного размера. Большие они или маленькие не столь важно, я использовал 6 картинок 1024х600px в jpg формате. При этом назвал их по числовому порядку и положил в папку img. Делаем, как показано тут:

Галерея при помощи HTML

После всех действий остаётся открыть index.html через Notepad++ и вставить вот этот большой код:

HTML код:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Gallery</title>
  5.     <meta charset="utf-8" />
  6.  
  7.     <!------------ Скрипты ------------>
  8.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  9.     <script type="text/javascript">
  10.     $(document).ready(function() {
  11.         var cwidth = parseInt($("#ImgContainer").css("width").replace("px", ""));
  12.         var img_count = $("#img_container").children().length;
  13.         var img_width = $("#img1").width();
  14.         var divider = cwidth / img_count;
  15.         var small_space = (cwidth - img_width) / (img_count - 1);
  16.  
  17.         // Задаём позицию
  18.         var cssleft = Array();
  19.         $("#img_container img").each(function(index) {
  20.             cssleft[index] = new Array();
  21.             // задаём позицию по умолчанию
  22.             cssleft[index][0] = (index * divider) - (index * img_width);
  23.             $(this).css("left", cssleft[index][0] + "px");
  24.  
  25.             // Задаём позицию слева
  26.             cssleft[index][1] = (index * small_space) - (index * img_width);
  27.  
  28.             // Задаём позицию справа
  29.             var index2 = index;
  30.             if (index2 == 0) {
  31.                 index2++;
  32.             }
  33.             cssleft[index][2] = cssleft[index2 - 1][1];
  34.         });
  35.  
  36.         // Раскрываем картинки при наведении мышки
  37.         $("#img_container img").mouseenter(function() {
  38.             var img_id = parseInt($(this).attr("id").replace("img", "")) - 1;
  39.  
  40.             if ($(this).attr("id") != "img1") {
  41.                 $(this).animate({ 
  42.                     left: cssleft[img_id][1] 
  43.                 }, 300);
  44.             }                
  45.             loopNext(this);
  46.             loopPrev(this);
  47.         });
  48.  
  49.         // Возвращаем позиции картинок по умолчанию
  50.         $("#img_container").mouseleave(function() {
  51.             $("#img_container img").each(function(index) {
  52.                 $(this).animate({
  53.                     left: cssleft[index][0]
  54.                 }, 300);
  55.             });
  56.         });
  57.  
  58.         function loopPrev(el) {
  59.             if ($(el).prev().is("img")) {
  60.                 var imgprev_id = parseInt($(el).attr("id").replace("img", ""));
  61.  
  62.                 if ($(el).prev().attr("id") != "img1") {
  63.                     $(el).prev().animate({
  64.                         left: cssleft[imgprev_id - 2][1]
  65.                     }, 300);
  66.                 }
  67.                 loopPrev($(el).prev());
  68.             }
  69.         }
  70.  
  71.         function loopNext(el) {
  72.             if ($(el).next().is("img")) {
  73.                 var imgnext_id = parseInt($(el).attr("id").replace("img", ""));
  74.  
  75.                 $(el).next().animate({
  76.                     left: cssleft[imgnext_id][2]
  77.                 }, 300);
  78.                 loopNext($(el).next());
  79.             }
  80.         }
  81.     });
  82.     </script>
  83.  
  84.     <!------------ Стили ------------>
  85.     <style type="text/css">
  86.     body {
  87.         margin: 0;
  88.         padding: 0;
  89.         font-family: Arial, "Free Sans";
  90.         background-color: #8899bb;
  91.     }
  92.     #main-text {
  93.         background: #0099cc;
  94.         margin-top: 0;
  95.         padding: 2px 0 4px 0;
  96.         text-align: center;
  97.     }
  98.     #main-text a {
  99.         color: #ffffff;
  100.         text-decoration: none;
  101.         font-size: 12px;
  102.         font-weight: bold;
  103.         font-family: Arial;
  104.     }
  105.     #main-text a:hover {
  106.         text-decoration: underline;
  107.     }
  108.     #ImgContainer {
  109.         margin: 0 auto;
  110.         margin-top: 150px;
  111.         width: 800px;
  112.         height: 350px;
  113.         overflow: hidden;
  114.         border: 3px solid #5a5e61;
  115.         -webkit-border-radius: .4em;
  116.         -moz-border-radius: .4em;
  117.         border-radius: .4em;
  118.     }
  119.     #img_container {
  120.         width: 4000px;
  121.     }
  122.     #img_container img {
  123.         position: relative;
  124.         -moz-box-shadow: -4px 0 10px #000;
  125.         -webkit-box-shadow: -4px 0 10px #000;
  126.         box-shadow: -4px 0 10px #000;
  127.         width: 600px;
  128.     }
  129.     #img1 { z-index: 0; }
  130.     #img2 { z-index: 1; }
  131.     #img3 { z-index: 2; }
  132.     #img4 { z-index: 3; }
  133.     #img5 { z-index: 4; }
  134.     #img6 { z-index: 5; }
  135.     </style>
  136. </head>
  137. <body>
  138.  
  139. <!------------ Изображения ------------>
  140. <div id="ImgContainer">
  141.     <div id="img_container">
  142.         <img id="img1" src="img/01.jpg"/>
  143.         <img id="img2" src="img/02.jpg"/>
  144.         <img id="img3" src="img/03.jpg"/>
  145.         <img id="img4" src="img/04.jpg"/>
  146.         <img id="img5" src="img/05.jpg"/>
  147.         <img id="img6" src="img/06.jpg"/>
  148.     </div>
  149. </div>
  150. <!------------ Изображения ------------>
  151.  
  152. </body>
  153. </html>

Сохраняем наш html и открываем его через браузер. Вот как выглядит наша галерея изображений, ДЕМО.

И так, что мы сделали для того чтобы всё заработало. Во-первых, подключили библиотеку jQuery со стороннего сервера от google и написали скрипт, задав поведение картинок в зависимости от действий курсора. Кстати, каждое действие подписал, читайте код. Во-вторых, написал стили для нашей галереи. Скрипт и стили можно было вывести в отдельные файлы js и css, но когда в одном месте понятнее смотрится, к тому же меньше действий выполнять пришлось. В-третьих, вставил изображения из папки img. Вот так вот, при помощи всего одного файла и папки с картинками можно создать этот красивый эффект. Обратите внимание на $ (доллар) в скрипте, мы к нему ещё вернёмся, так как будем этот самый код приспосабливать для работы в Joomla шаблоне.

2 способ. Галерея на PHP для шаблона Joomla.

Здесь то и начинается самое сложное, адоптировать код для шаблона. Наверняка вам знакома ситуация, когда сутками ищите нужную функцию в интернете и после того как его находите, пытаетесь установить к себе на сайте, а нечего не выходит. В лучшем случае браузер откроет страницу без изменений, а в худшем появляется ошибка. Здесь правильное слово - «адаптировать», так как функция может быть рабочей, но знаний не хватает для того чтобы поправить под свой сайт. Если вы сейчас попробуете перенести все действия из первого способа в ваш шаблон, который работает на Joomla, то галерея работать не будет. Так давай те же разбираться в чём дело, ведь если мы решим эту проблему, то сможем создавать абсолютно любые элементы дизайна, взяв их из разных источников в сети. Предлагаю для начала создать саму галерею, ну а после рассмотрим ошибки.

Задача:

  1. Добавить стили в файл css.
  2. Создать поля для добавления картинок. Эти настройки будут находиться в менеджере шаблонов. Так мы сможем загружать картинки в каталог и выбирать их.
  3. Напишем PHP код. Он нужен будет для того, чтобы определить установлена ли картинка в менеджере и если установлена, то выводить на странице.
  4. Создадим javascript, как и в первом примере, он будет отвечать за действия мышки.

Пункты расположены от лёгкого к сложному. За основу возьмём стандартный Joomla шаблон protostar версии 3.5.x. Если у вас другой шаблон, то не чего страшного. А вот Joomla лучше, чтобы она была новой, так как гарантировать работоспособность кода в этом случае сложно. И так, приступим…

1. Добавляем стили.

На сервере находим файл template.css в папке CSS. Он расположен тут …/templates/protostar/css.

Добавляем стили

Открываем его через Notepad++ и пишем стили в самом конце файла:

CSS код:
  1. /*SlidingGallery*/
  2. #ImgContainer {
  3.     margin: 20px auto;
  4.     margin-top: 0;
  5.     width: 800px;
  6.     height: 350px;
  7.     overflow: hidden;
  8.     border: 3px solid #5a5e61;
  9.     -webkit-border-radius: .4em;
  10.     -moz-border-radius: .4em;
  11.     border-radius: .4em;
  12. }
  13. #img_container {
  14.     width: 4000px;
  15. }
  16. #img_container img {
  17.     position: relative;
  18.     -moz-box-shadow: -4px 0 10px #000;
  19.     -webkit-box-shadow: -4px 0 10px #000;
  20.     box-shadow: -4px 0 10px #000;
  21.     width: 600px;
  22. }
  23. #img1 { z-index: 0; }
  24. #img2 { z-index: 1; }
  25. #img3 { z-index: 2; }
  26. #img4 { z-index: 3; }
  27. #img5 { z-index: 4; }
  28. #img6 { z-index: 5; }

Вот вам для наглядности, как это выглядит:

Добавляем стили 2

Возвращаем template.css назад с заменой.

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

В основе любого шаблона есть файлы, без которых он не запуститься. Один из таких является templateDetails.xml. Он отвечает за настройки и располагается в том же месте, где и index.php.

Создаём настройки

Нужно его открыть и добавить туда этот код в самом низу:

HTML код:
  1. <field name="ImgFile1" class="" type="media" default=""
  2. label="SlidingGallery - Картинка 1"
  3. description="Добавляет изображение 1 в SlidingGallery." />
  4.  
  5. <field name="ImgFile2" class="" type="media" default=""
  6. label="SlidingGallery - Картинка 2"
  7. description="Добавляет изображение 2 в SlidingGallery" />
  8.  
  9. <field name="ImgFile3" class="" type="media" default=""
  10. label="SlidingGallery - Картинка 3"
  11. description="Добавляет изображение 3 в SlidingGallery" />
  12.  
  13. <field name="ImgFile4" class="" type="media" default=""
  14. label="SlidingGallery - Картинка 4"
  15. description="Добавляет изображение 4 в SlidingGallery" />
  16.  
  17. <field name="ImgFile5" class="" type="media" default=""
  18. label="SlidingGallery - Картинка 5"
  19. description="Добавляет изображение 5 в SlidingGallery" />
  20.  
  21. <field name="ImgFile6" class="" type="media" default=""
  22. label="SlidingGallery - Картинка 6"
  23. description="Добавляет изображение 6 в SlidingGallery" />

Как показано здесь:

Создаём настройки 2

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

  • name="ImgFile Цифра" - имя настройки. Мы будем писать его там, где потребуется вывести объект.
  • type="media" - определяет тип. В данном случае, это выбор картинки из каталога.
  • label="SlidingGallery - Картинка 1" - название настройки в менеджере шаблонов.
  • description="Добавляет изображение 1 в SlidingGallery." - описание. Всплывает при наведении мышки.

Если вы сейчас перейдёте в «Панель управления-->Расширения-->Менеджер шаблонов-->нажмёте на protostar-->И перейдёте в дополнительные параметры», то увидите следующее:

Создаём настройки 3

В нижней части страницы появились шесть новых настроек, где можно выбрать картинки из каталога. Найдите любые изображения и добавьте в каждое поле. Главное, чтобы все они были одинакового размера и широкоформатные. Я взял те же, что и в первом способе. На этом настройка заканчивается, сохранить и закрыть.

3. Пишем PHP для вывода картинок и подключаем скрипты.

Теперь необходимо выбрать место для галереи. Открываем index.php нашего шаблона:

Пишем PHP для вывода картинок и подключаем скрипты

И вставляем этот код, в то место, куда вы хотите:

PHP код:
  1. <?php
  2. if ($this->params->get('ImgFile1')){
  3.     $ImgFile1 = '<img id="img1" src="' . JUri::root() . $this->params->get('ImgFile1') . '" />';}
  4. if ($this->params->get('ImgFile2')){
  5.     $ImgFile2 = '<img id="img2" src="' . JUri::root() . $this->params->get('ImgFile2') . '" />';}
  6. if ($this->params->get('ImgFile3')){
  7.     $ImgFile3 = '<img id="img3" src="' . JUri::root() . $this->params->get('ImgFile3') . '" />';}
  8. if ($this->params->get('ImgFile4')){
  9.     $ImgFile4 = '<img id="img4" src="' . JUri::root() . $this->params->get('ImgFile4') . '" />';}
  10. if ($this->params->get('ImgFile5')){
  11.     $ImgFile5 = '<img id="img5" src="' . JUri::root() . $this->params->get('ImgFile5') . '" />';}
  12. if ($this->params->get('ImgFile6')){
  13.     $ImgFile6 = '<img id="img6" src="' . JUri::root() . $this->params->get('ImgFile6') . '" />';}
  14. ?>
  15. <?php
  16.     if ($this->params->get('ImgFile1')){
  17.     echo '<div id="ImgContainer"><div id="img_container">';
  18.         echo $ImgFile1;
  19.         echo $ImgFile2;
  20.         echo $ImgFile3;
  21.         echo $ImgFile4;
  22.         echo $ImgFile5;
  23.         echo $ImgFile6;
  24.     echo '</div></div>';}
  25. ?>
  26. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  27. <script type="text/javascript" src="<?php echo JURI::base (true); ?>/templates/protostar/js/SlidingGallery.js"></script>

Я поставил в верхнюю часть сайта, после того как открылся основной контейнер страницы, ищите по картинке:

Пишем PHP для вывода картинок

Верните index.php обратно на сервере.

Здесь мы написали функцию, которая определяет, выбрана ли картинка в настройках менеджера. Определение идёт по названию -  ImgFile (смотрите пункт 2). Если картинка есть, то формируется ссылка до неё. Эта самая ссылка заключена в переменную $ImgFileНомер, благодаря чему мы можем выводить объект из настроек при помощи этой строчки:

PHP код:
  1. echo $ImgFileНомер;

При этом вся галерея заключена в условие - если первая картинка не загружена, то не показывать на сайте. Так будет правильно, с учётом того, что скрипт всё равно не будет адекватно работать, если пропустить картинку (читайте об этом ниже, в заключении).

Важно!

Дальше идёт подключение библиотеки jQuery.

HTML код:
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

В зависимости от настроек файла .htaccess находящегося в основном каталоге, нужно будет выбрать, писать http или https. Не смотря на то, что у меня SlidingGallery работает в обоих случаях, при написании http показывает предупреждение - «This content should also be served over HTTPS». Поэтому написал https.

И наконец:

HTML код:
  1. <script type="text/javascript" src="<?php echo JURI::base (true); ?>/templates/protostar/js/SlidingGallery.js"></script>

Здесь мы подключаем script, который ещё предстоит создать в 4 пункте. Проверяйте все пути до файлов, если используете свой шаблон.

4. Создаём javascript.

При помощи программы notepad++ создаём файл SlidingGallery.js и вставляем туда этот код:

jQuery код:
  1. jQuery(document).ready(function() {
  2.     var cwidth = parseInt(jQuery("#ImgContainer").css("width").replace("px", ""));
  3.     var img_count = jQuery("#img_container").children().length;
  4.     var img_width = jQuery("#img1").width();
  5.     var divider = cwidth / img_count;
  6.     var small_space = (cwidth - img_width) / (img_count - 1);
  7.  
  8.     // Задаём позицию
  9.     var cssleft = Array();
  10.     jQuery("#img_container img").each(function(index) {
  11.         cssleft[index] = new Array();
  12.         // задаём позицию по умолчанию
  13.         cssleft[index][0] = (index * divider) - (index * img_width);
  14.         jQuery(this).css("left", cssleft[index][0] + "px");
  15.  
  16.         // Задаём позицию слева
  17.         cssleft[index][1] = (index * small_space) - (index * img_width);
  18.  
  19.         // Задаём позицию справа
  20.         var index2 = index;
  21.         if (index2 == 0) {
  22.             index2++;
  23.         }
  24.         cssleft[index][2] = cssleft[index2 - 1][1];
  25.     });
  26.  
  27.     // Раскрываем картинки при наведении мышки
  28.     jQuery("#img_container img").mouseenter(function() {
  29.         var img_id = parseInt(jQuery(this).attr("id").replace("img", "")) - 1;
  30.  
  31.         if (jQuery(this).attr("id") != "img1") {
  32.             jQuery(this).animate({ 
  33.                 left: cssleft[img_id][1] 
  34.             }, 300);
  35.         }                
  36.         loopNext(this);
  37.         loopPrev(this);
  38.     });
  39.  
  40.     // Возвращаем позиции картинок по умолчанию
  41.     jQuery("#img_container").mouseleave(function() {
  42.         jQuery("#img_container img").each(function(index) {
  43.             jQuery(this).animate({
  44.                 left: cssleft[index][0]
  45.             }, 300);
  46.         });
  47.     });
  48.  
  49.     function loopPrev(el) {
  50.         if (jQuery(el).prev().is("img")) {
  51.             var imgprev_id = parseInt(jQuery(el).attr("id").replace("img", ""));
  52.  
  53.             if (jQuery(el).prev().attr("id") != "img1") {
  54.                 jQuery(el).prev().animate({
  55.                     left: cssleft[imgprev_id - 2][1]
  56.                 }, 300);
  57.             }
  58.             loopPrev(jQuery(el).prev());
  59.         }
  60.     }
  61.  
  62.     function loopNext(el) {
  63.         if (jQuery(el).next().is("img")) {
  64.             var imgnext_id = parseInt(jQuery(el).attr("id").replace("img", ""));
  65.  
  66.             jQuery(el).next().animate({
  67.                 left: cssleft[imgnext_id][2]
  68.             }, 300);
  69.             loopNext(jQuery(el).next());
  70.         }
  71.     }
  72. });

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

Важно!

В старых версиях Joomla очень часто возникал конфликт между скриптами. Это происходило, потому что имена функций или переменных были одинаковыми. В данном случае это $ (знак доллара). Он используется во внутренних скриптах joomla, а так же имеется в нашей подключённой jQuery библиотеки. Поэтому использовать $ нельзя, так как это неизбежно приведёт к не рабочему коду. Однако заменить знак доллара нам позволило два условия. Во-первых, мы используем версию Joomla 3.5.x и разработчики добавили в неё jQuery.noConflict(), эта строчка загружается вместе с другими скриптами в верхней части странице. А во-вторых, в jQuery знак доллар является синонимом идентификатора jQuery. Освобождая имя $ при помощи jQuery.noConflict() мы не теряем работоспособность библиотеки jQuery, так как можем использовать имя jQuery вместо него. Вот почему мы заменили $ на jQuery и всё работает. В старых же версиях, дополнительно пришлось бы вставлять это:

HTML код:
  1. <script type="text/javascript">
  2.     jQuery.noConflict();
  3. </script>

Возвращаемся к созданному файлу SlidingGallery.js, его необходимо разместить в …/templates/protostar/js/ SlidingGallery.js как показано на картинке.

Создаём javascript

Вот и всё, остаётся открыть сайт и если вы уже добавляли картинки в настройках, то должны увидеть нечто подобное у себя:

Создаём javascript

Заключение

Стили можно изменить и загружать не только широкоформатные картинки, но и любые другие. Однако чтобы галерея смотрелась красиво, желательно подбирать все одного размера. Если вам вдруг не требуется показывать сразу все шесть изображений, то код не обязательно править. Достаточно загрузить картинки последовательно не пропуская пунктов в настройках, иначе SlidingGallery будет работать не корректно. К примеру, вам нужно 4 картинки из 6, вы просто не заполняете 2 последние. Они не будут учитываться скриптом и галерея сама перестроится под 4 первых объекта.

Заключение

SlidingGallery прекрасно подходит для портфолио на главной странице сайта, а самое важное, нашу галерею можно редактировать через панель управления.

 
4.4938271604938 1 1 1 1 1 (Оценок: 243)
4.4938271604938 243
Опубликовано: 07-06-2016

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

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

Комментарии  

Иван
0 #1 Иван 29.07.2016 16:37
Прекрасный способ украсить сайт . Будет смотреться живо , оригинально и хорошо представлять главную страницу . Советую уделять этому как возможно больше времени , говорю как человек с опытом.

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