Галерея на MODx Revolution

В настройке фото галереи на MODX Revolution нет ничего сложного. В этой статье я расскажу как сделать простенькую галерею с использованием плагина Colorbox (надстройка над jQuery плагином lightbox) и плагином jQuery Asynchronous Image Loader (JAIL) для избавления от пагинации в будущей галерее.

Вот что нам понадобится:

Не буду описывать как установить дополнения, это можно сделать с помощью встроенного в систему менеджера, либо вручную.
После того, как все компоненты установлены, можете переходить к созданию галереи и ее наполнению через менеджер (Компоненты — Gallery).
После этого можно перейти к добавлению чанков. Для галереи понадобятся три чанка:
DemoGalAlbumRowTpl — шаблон списка фотографий в галерее

  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>

DemoGalItemThumb — шаблон для одиночной картинки

  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>

Обратите внимание на атрибуты data-href и src у ссылок. В первом следует указывать путь к изображению, во втором — картинку загрузки, например, loading gif.

DemoGalleryAlbumTpl — шаблон для вывода списка альбомов

  1. <h1>[[+album_name]]</h1>
  2. <p>[[+album_description]]</p>
  3. [[+thumbnails]]

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

  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/JqueryAsynchImageLoader.min.js"></script>
  14.     <script src="assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js"></script>
  15.  
  16.     <script>
  17.         $(document).ready(function () {
  18.             $('.gal-item img').asynchImageLoader({placeholder : "assets/templates/site/images/loading-thumb.gif"});
  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? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`DemoGalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`DemoGalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
  67.  
  68.         [[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`
  69.  
  70.             [[+GalleryAlbums]]
  71.  
  72.         ` &else=`
  73.  
  74.             [[+Gallery]]
  75.  
  76.         `]]
  77.  
  78.     </div>
  79.  
  80. </body>
  81. </html>

Ну вот и все, галерея на MODx Revolution готова, перед использованием не забудьте поправить пути к скриптам на свои 😉 enjoy!

Запись опубликована в рубрике MODX Revolution с метками . Добавьте в закладки постоянную ссылку.

Один комментарий: Галерея на MODx Revolution

  1. dfgdfg говорит:

    Ну, а куда фотки то заливать?
    Нихрена не работает

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">