Галерея MODX revo

Дата редактирования: 12.03.2015 Просмотрен: 16878

Мне пришлось помучится с несколькими источниками, которые я укажу ниже, надеюсь Вам будет по проще. Создаем галерею в MODX revo. Для чего необходимо скачать несколько файлов:

Компонент Gallery
If для MODX Revo
Colorbox lightbox плагин для JQuery
jquery.lazyload.mini.js
jquery.min.js

Теперь необходимо установить компонент Gallery и дополнение IF в MODX. Сделать это возможно скопировав архивы в папку "core/packages", затем в админке перейти в "Система -> Управление пакетами -> Загрузить дополнения -> Искать пакет локально" теперь вы увидите их в списке дополнений. Кликните установить.

Теперь нужно скопировать jquery.lazyload.mini.js, jquery.min.js в папку "/assets/templates/ВАШ ШАБЛОН/js", а архив colorbox-master.zip распаковать и поместить в папку "/assets/templates/ВАШ ШАБЛОН/" под именем colorbox (т.к. у меня пути к папке именно с таким именем)

Теперь нужно создать три чанка: MyGalItemThumb

<div class="[[+cls]]"> <a href="/[[+image]]" rel="colorbox" title="[[+description]]"> <img class="[[+imgCls]]" src="/[[+thumbnail]]" alt="[[+name]]" /> </a>  [[+name]] </div>


MyGalAlbumRowTpl

<div class="albumPreview">
<h3><a href="/[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">[[+name]]</a></h3>
<div class="thumb">
<a href="/[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]"><img src="/[[+image]]" alt="[[+name]]"/></a>
</div>
<div class="desc">
<p>[[+description]]</p>
<a href="/[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]" class="view">Показать фотографии</a>
</div>
</div>


MyGalleryAlbumTpl

<h1>[[+album_name]]</h1>
<p>[[+album_description]]</p>
[[+thumbnails]]


И шаблон, в который вставить (я привожу шаблон исключительно для проверки работоспособности галереи):

<!doctype html> 
 
<head>


<base href="/[[++site_url]]" />

<title>[[++site_name]] — [[*pagetitle]]</title>
 
<link rel="stylesheet" href="/assets/templates/ВАШ ШАБЛОН/colorbox/example1/colorbox.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="/assets/templates/ВАШ ШАБЛОН/js/jquery-1.9.1.min.js"></script>
<script src="/assets/templates/ВАШ ШАБЛОН/js/jquery.lazyload.mini.js"></script>
<script src="/assets/templates/ВАШ ШАБЛОН/colorbox/jquery.colorbox-min.js"></script>
 
<script>
$(document).ready(function () {
$("img").lazyload({effect : "fadeIn"});
$("a[rel='colorbox']").colorbox();
});
</script>
 
</head>
 
<body>
 
<h1 class="basich1">[[*pagetitle]]</h1>

[[*content]]
[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`MyGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]
 
[[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`MyGalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`MyGalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
 
[[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`
 
[[+GalleryAlbums]]

`]]


[[+Gallery]]


 
</body>
</html>

 

Теперь присвойте одному из ресурсов созданный выше шаблон.

Теперь нужно создать альбомы и загрузить фотографии. Открываем в верхнем меню админки "Компоненты -> Gallery" и добавляем альбом. Теперь в него можно войти и добавить изображения. Подробно рассказывать не буду там интуитивно все понятно. Да кстати что бы добавить описание для фотографии нужно кликнуть на ней правой кнопкой мыши и выбрать "Редактировать элемент"

Пример работы компонента

Источники:

www.creativecult.org
modx.ws

Документация



Создан: 15.05.2013 10:33 | Отредактирован: 12.03.2015 06:39