Галерея на MODx Revolution с использованием Colorbox и Lazy Load

Еще один вариант простой фото галереи на MODx Revolution. На этот раз мы будем пользоваться jQuery плагинами Colorbox (доработанный lightbox) и Lazy Load (для постепенной подгрузки изображений).

Скачать Lazy Load можно по ссылке http://www.appelsiini.net/projects/lazyload
Про остальные компоненты, нужные для создания галереии, я писал в прошлом посте про галереи на MODx Revolution. Из них нам понадобятся сам CMF MODX Revolution (куда ж без него), Gallery для MODX Revolution (для организации галереи на сайте), IF для MODX Revolution (чтобы можно было делать ветвления if then) и, непосредственно, Colorbox, для облагораживания увеличенных изображений.
Установка всего этого проста, поэтому сразу перейду к описанию действий по воплощению задумки в жизнь. Перед тем, как продолжить, загрузите несколько изображений в альбом галереи через менеджер.

Нам потребуется всего три чанка.
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="[[+cls]]">
  2.     <a href="[[+image]]" rel="colorbox" title="[[+description]]">
  3.         <img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
  4.     </a>
  5.   [[+name]]
  6. </div>

DemoGalleryAlbumTpl — альбом с описание и превью фотографий в нем

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

И напоследок, самый минималистичный шаблон для тестирования нашей новой фото галереи на MODx Revolution:

  1. <!doctype html>  
  2.  
  3. <head>
  4.     <meta charset="utf-8">
  5.     <base href="[[++site_url]]" />
  6.     <title>[[++site_name]] - [[*pagetitle]]</title>
  7.     <link rel="stylesheet" href="assets/templates/demo/colorbox/example1/colorbox.css" />
  8.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  9.     <script src="assets/templates/demo/jquery.lazyload.mini.js"></script>
  10.     <script src="assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js"></script>
  11.     <script>
  12.         $(document).ready(function () {
  13.             $("img").lazyload({effect : "fadeIn"});
  14.             $("a[rel='colorbox']").colorbox();
  15.         });
  16.     </script>
  17.     <style type="text/css">
  18.         body{
  19.             font-family: Arial;
  20.             font-size: 16px;
  21.         }
  22.         #Content{
  23.             width: 600px;
  24.         }
  25.         .gal-item{
  26.             float: left;
  27.             margin: 10px;
  28.             text-align: center;
  29.         }
  30.         .gal-item a{
  31.             display: block;
  32.         }
  33.         .gal-item img{
  34.             border: solid 4px #CCC;
  35.         }
  36.         .gal-item img:hover{
  37.             border: solid 4px #666;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div id="Content">
  43.         <h1>[[*pagetitle]]</h1>
  44.         [[*content]]
  45.         [[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`DemoGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]
  46.         [[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`DemoGalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`DemoGalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
  47.         [[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`
  48.             [[+GalleryAlbums]]
  49.         ` &else=`
  50.             [[+Gallery]]
  51.         `]]
  52.     </div>
  53. </body>
  54. </html>

Вот и всё, enjoy!

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

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

Ваш 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="">