Slyweb
На разработку сайта! Скидки 50%!

ModX Revo - Галерея ColorBox и её установка

jQuery сниппеты

Установка галерей изображений в Modx Revo вызывает наибольшее затруднение у начинающих пользователей Modx. Например, часто не получается дубиться работоспособности в некоторых новейших браузерах, особенно на мобильных устройствах работы галереи плагина Galery на основе jQuery, напримре галерей lightbox или colorbox. Поэтому далее будет разобран пример установки галереи. В низу статьи есть видео с YuoTube.

Между тем, при правильной установке плагина jQuery colorbox(галерея на jQuery) вполне возможно установить работоспособную галерею. Что необходимо для установки галереи?

Видео с YouTube о том как вставить галерею в ModX Revo:

Для начала установите MODx, если Вы этого ещё не сделали. Затем установите пакет Galery через "Сиситема" -> "Управление пакетами" -> "Загрузить дополнение" -> "По популярности" -> "Galery" -> "Загрузить" -> "Пакеты" -> "Установить" -> "Продолжить" .

Сейчас нужно создать несколько галерей на вкладке "Компоненты" - "Галерея". Зайти в альбом и загрузить изображения, потом обязательно сохранить его!

После этого нужно изменить стандартные чанки галереи (вкладка "Элементы", подраздел дерева "Чанки").

Чанки галереи

Чанки "GalleryAlbumTpl"

Первый отвечает за вывод разделов всех альбовомов:

  • Код
  • Чистый код
  1.<!--
  2.<h1>[[+album_name]]</h1>
  3.<p>[[+album_description]]</p>
  4.-->
  5.[[+thumbnails]]
  6.

        

Так как мне не нужно, чтоб альбомы и их названия выводились, я просто их закомментировал в чанке "GalleryAlbumTpl".

Чанки "GalAlbumRowTpl"

Второй чанк отвечает за вывод и отображение отдельных альбомов:

  • Код
  • Чистый код
  1.<div class="albumPreview">
  2. <h3><a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">[[+name]]</a></h3>
  3. <div class="thumb">
  4. <a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]"><img src="[[+image]]" alt="[[+name]]"/></a>
  5. </div>
  6. <div class="desc">
  7. <p>[[+description]]</p>
  8. <a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]" class="view">View gallery</a>
  9. </div>
10.</div>
11.
12.

        

Чанки "GalItemThumb"

Третий чанк отвечает за вывод отдельного изображения из определенного альбома:

  • Код
  • Чистый код
  1.<div class="[[+cls]]">
  2. <a href="[[+image]]" rel="colorbox" title="[[+description]]">
  3. <img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
  4. </a>
  5. [[+name]]
  6.</div>

        

Страница вывода предыдущих чанков

Шаблон вывода сниппетов галереи (для примера обычная стринца HTML):

  • Код
  • Чистый код
  1.<!doctype html>
  2.
  3.<head>
  4. <meta charset="utf-8">
  5.
  6. <base href="[[++site_url]]" />
  7.
  8. <title>[[++site_name]] - [[*pagetitle]]</title>
  9.
10. <link rel="stylesheet" href="assets/templates/demo/colorbox/example1/colorbox.css" />
11.
12. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
13. <script src="assets/templates/demo/jquery.lazyload.mini.js"></script>
14. <script src="assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js"></script>
15.
16. <script>
17. $(document).ready(function () {
18. $("img").lazyload({effect : "fadeIn"});
19. $("a[rel='colorbox']").colorbox();
20. });
21. </script>
22.
23. <style type="text/css">
24.
25. body{
26. font-family: Arial;
27. font-size: 16px;
28. }
29.
30. #Content{
31. width: 600px;
32. }
33.
34. .gal-item{
35. float: left;
36. margin: 10px;
37. text-align: center;
38. }
39.
40. .gal-item a{
41. display: block;
42. }
43.
44. .gal-item img{
45. border: solid 4px #CCC;
46. }
47.
48. .gal-item img:hover{
49. border: solid 4px #666;
50. }
51.
52. </style>
53.
54.</head>
55.
56.<body>
57.
58. <div id="Content">
59.
60. <h1>[[*pagetitle]]</h1>
61.
62. [[*content]]
63.
64. [[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`DemoGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]
65.
66. [[!Gallery? &album=`[[*galery_name]]` &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`GalleryAlbumTpl` &thumbWidth=`140` &thumbHeight=`100` &thumbTpl=`GalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
67.
68.
69. [[+Gallery]]
70.
71. </div>
72.
73.</body>
74.</html>
75.

        

Если Вы не создадите TV "galery_name"

Будет отображена ошибка "Warning: Invalid argument supplied for foreach() in /var/www/jquery/data/www/37.230.112.175/modx/core/cache/includes/elements/modsnippet/1.include.cache.php on line 106 Fatal error: Cannot use string offset as an array in /var/www/jquery/data/www/37.230.112.175/modx/core/cache/includes/elements/modsnippet/1.include.cache.php on line 165 "

Особое внимание уделите полю [[*galery_name]], оно необходимо для вывода галереи котороя указана в дополнительном поле (TV) для каждой статьи, вместо него Вы можете написать название галереи, которую только-что создали.

Особое внимание уделите полю [[*galery_name]], оно необходимо для вывода галереи, котороя указана в дополнительном поле (TV) для каждой статьи, вместо него Вы можете написать название галереи, которую только-что создали. Дополнительное поле "galery_name" TV необходимо создать самостоятельно, на вкладке "Элементы", если Вы хотите указывать галерею для каждой статьи, если будете прописывать название галереи вручную, то создовать TV не надо.

По умолчанию в MODX отсутсвует папка templates. Её нужно создать и загрузить в неё следующие файлы:

  • colorbox.css
  • jquery.colorbox-min.js
  • jquery.lazyload.mini.js

Плагины "slimbox" или "galleryfic"

Если вым необходимо использовать плагины "slimbox" или "galleryfic", то нужно обновить чанк "GalItemThumb", в котром мы просто меняем парметр rel на "ligh tbox", например для "slimbox"

  • Код
  • Чистый код
  • Копировать в буфер
  1.<div class="[[+cls]]">
  2.<a href="[[+image]]" rel="lightbox" title="[[+description]]">
  3.<img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
  4.</a>
  5.[[+name]]
  6.</div>

        

Соотвественно необходимо изменить наш с вами основной шаблон:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<!doctype html>
  2.<head>
  3.    <meta charset="utf-8">
  4.    <base href="[[++site_url]]" />
  5.    <title>[[++site_name]] - [[*pagetitle]]</title>
  6.
  7.    <script>
  8.    $(document).ready(function () {
  9.
10.    });
11.    </script>
12.    <style type="text/css">
13.        body{
14.        font-family: Arial;
15.        font-size: 16px;
16.        }
17.        #Content{
18.        width: 600px;
19.        }
20.        .gal-item{
21.        float: left;
22.        margin: 10px;
23.        text-align: center;
24.        }
25.        .gal-item a{
26.        display: block;
27.        }
28.        .gal-item img{
29.        border: solid 4px #CCC;
30.        }
31.        .gal-item img:hover{
32.        border: solid 4px #666;
33.        }
34.    </style>
35.</head>
36.<body>
37.    <div id="Content">
38.        <h1>[[*pagetitle]]</h1>
39.        [[*content]]
40.        [[!GalleryAlbums]]
41.        [[Gallery?
42.         &album=`One`
43.         &plugin=`slimbox`
44.         &loop=`1`
45.         &slimboxLoadJQuery=`1`
46.        ]]
47.
48.    </div>
49.</body>
50.</html>

        

Обратите внимание не нужно самостоятельно прописывать путь для js и css файлов необходимых для работы галереи "slimbox", так как Компоннт Galery самостоятельно сделает это за нас.

Итог нашей с Вами работы будет выглядеть примерно следующим образом, в зависимости от плагина:

MODX Revolution Photo Gallery @Slimbox@

Demo Album 1

Demo Album 1 - Description

MODX Revolution Photo Gallery @Colorbox@

Demo Album 1

Demo Album 1 - Description

Поделись статьёй: 
Александр Ермаков