"Уже сегодня делай то, о чем другие будут думать завтра!"

Gallery

Сайдбар

Что такое Gallery ?


Gallery modx revo – это динамичное приложение для MODx Revolution. Оно позволяет Вам быстро и удобно создавать галереи картинок, сортировать и маркировать их, отображать их на фронтэнде («лицевой» части сайта, которую видят простые посетители)230, Вашего сайта различными способами.


Требования


• MODx Revolution 2.0.0-rc-2 или более поздняя версия
• PHP5 или более поздняя версия

История и информация Gallery modx revo

Приложение Gallery было написано Шоном МакКормиком (Shaun McCormick) как динамичный компонент и впервые вышло 5 февраля 2010 года.

Разработка и отчет об ошибке


Приложение хранится и разрабатывается на GitHub.

Использование

Сниппет Gallery modx revo можно вызвать так:

 

Сниппеты Gallery modx revo


В пакете Gallery есть 3 сниппета: один называется «Галерея», который отображает альбомы или ярлыки. Второй – это сниппет «Альбомы галереи» - отображает список альбомов; третий – «Элементы галереи» - отображает единичный элемент галереи.


Gallery
GalleryAlbums
GalleryItem

Настройки системы

Вы можете сменить место хранения картинок для Gallery, изменив следующие настройки:

gallery.files_path Абсолютный путь к папке, в которой хранятся картинки

gallery.files_url Доступный URL-адрес, при помощи которого Вы можете достичь gallery.files_path

В версии 1.3.0 Вы можете активировать управлять TinyMCE для описания элементов Gallery. Доступны следующие настройки:

Ключ

Описание

gallery.use_richtext

Установите «Да», чтобы активировать интеграцию TinyMCE. Обратите внимание, что у Вас должно быть установлено приложение TinyMCE.

gallery.tiny.width

Ширина текстового редактора в пикселях или процентах.

gallery.tiny.height

Высота текстового редактора в пикселях или процентах.

gallery.tiny.buttons1/2/3/4/5

Кнопки, которые будут отображаться в разных рядах (от 1 до 5). Если оставить пустым, останутся основные настройки TinyMCE.

gallery.tiny.custom_plugins

Разделенный запятыми список плагинов для загрузки. Если оставить пустым, останутся основные настройки TinyMCE.

gallery.tiny.theme_advanced_blockformats

Форматы блоков, для использования в выпадающем окне. Если оставить пустым, останутся основные настройки TinyMCE.

gallery.tiny.theme_advanced_css_selectors

CSS селекторы, которые можно выбирать. Если оставить пустым, останутся основные настройки TinyMCE.

Использование пользовательских TV (переменные шаблона)

В приложении Gallery существуют пользовательские TV ввода и вывода для управления картинками на бэкэнде(административная часть сайта, которую не видят простые посетители). Вы можете кадрировать, изменять размеры, вращать изображение и многое другое. Пожалуйста, простите следующую статью, чтобы узнать больше об использовании TV:


• Setting Up the GalleryItem TV


Плагины приложения Gallery


Это приложение позволяет Вам отображать галерею изображений при помощи пиктограмм картинок на фронтэнде сайта или при помощи плагинов jQuery. Вы можете ввести имя плагина в сниппет Gallery. На данный момент, доступен только плагин для Galleriffic.


Менеджер приложения Gallery


Приложение выпускается с пользовательской страницей менеджера (можно увидеть в верхнем меню компонентов), на которой Вы можете управлять альбомами. Так же Вы можете создавать новые альбомы, давать им имя и использовать это имя в сниппете Gallery для быстрого доступа к нужному альбому. После создания альбома, кликните правой кнопкой мыши, чтобы обновить его и управлять изображениями, связанными с этим альбомом.
Вы можете использовать четыре вида загрузки изображений. Это может быть загрузка единичного элемента (по желанию с текстом, содержащим теги форматирования; смотрите системные настройки, описанные выше), множественная загрузка, пакетная загрузка с поиском папок в файловой системе и импортом найденных картинок и zip-загрузка, при помощи которой можно разархивировать zip-файлы.


Медиа-ресурс приложения Gallery


Приложение выпускается с пользовательским Медиа-ресурсом, благодаря которому можно отображать альбомы и их элементы в левой частви менеджера программы. Просто создайте новый медиа-ресурс с типом «Альбомы галереи», а приложение сделает все остальное.


Примеры


Образец строки исходного текста для галереи Galleriffic и альбома «Мой альбом».


  



Захватите первые 10 фотографий, обозначенные как «Развлечение»

 



Захватите все фотографии в альбоме «Мой альбом», обозначенные как «Синие»



Сниппет Gallery

Этот сниппет отображает «галерею» изображений из альбома, из ярлыка или обоих.

Свойства

Имя

Описание

Значение по умолчанию

album

Загрузит элементы только из заданного альбома. Можно указать имя или ID альбома.


tag

Загрузит только элементы только с данным ярлыком.


plugin

Имя плагина, который нужно использовать для отображения на фронтэнде сайта. Прочтите раздел «Плагины» ниже.


thumbTpl

Чанк для использования в качестве tpl для каждой из пиктограмм.

galItemThumb

containerTpl

Чанк для заключения ввода в оболочку.


toPlaceholder

Если настроено, установит вывод подстановщика с заданным значением и вызов сниппета ничего не покажет.


placeholderPrefix

Если не установлен подстановщик, добавит префикс к свойствам имя/id/описание/общее текущего альбома с заданным префиксом.

gallery.

thumbWidth

Ширина созданной пиктограммы в пикселях.

100

thumbHeight

Высота созданной пиктограммы в пикселях.

100

thumbZoomCrop

Использовать или нет увеличение и кадрирование пиктограммы.

1

thumbFar

Соотношение размеров phpThumb с пиктограммой. Создается изображение с размером, заданным "w" (ширина) и "h"(высота), значение которых обязательно должно быть установлено. Значения обозначают выравнивание: L=left (левое), R=right (правое), T=top (верхнее), B=bottom (нижнее), C=center (по центру). Установите BL (нижнее левое), BR (нижнее правое), TL (верхнее левое), TR (верхнее правое) для пейзажных и портретных изображений.

C

thumbQuality

Качество созданной пиктограммы (от 0 до 100).

90

thumbProperties

JSON параметры для ввода в phpThumb в качестве свойств пиктограммы.


imageWidth

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

500

imageHeight

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

500

imageZoomCrop

Использовать или нет увеличение и кадрирование изображения.


imageFar

Соотношение размеров phpThumb с изображением.


imageQuality

Если используется плагином, качество изображения – от 0 до 100.

90

imageProperties

JSON параметры для ввода в phpThumb в качестве свойств изображения.


sort

Поле, по значению которого будет происходить сортировка. Вы так же можете выбрать "rand" для случайной сортировки.

rank

dir

Направление, в котором нужно сортировать изображения.

ASC

limit

Если установить значение не равное нулю, будет отображаться только Х(указанное количество) изображений.

0

start

Индекс, с которого начинается захват изображений, если установлен лимит. Похож на порядок SQL стартовым оператором.

0

showInactive

Если значение верное, отображает так же неактивные изображения.

false

albumRequestVar

Можно использовать для определения варианта запроса для поиска фильтром альбома, используя в связке с checkForRequestAlbumVar=`true`. Можно использовать для фильтра по имени или ID.

galAlbum

checkForRequestAlbumVar

Если найден вариант запроса со свойством albumRequestVar (по умолчанию galAlbum), то это значение будет использовано как свойство альбома для сниппета.

false

tagRequestVar

Можно использовать для определения варианта запроса для поиска фильтром дескрипторов, используя в связке с checkForRequestTagVar=`true`.

galTag

checkForRequestTagVar

Если найден вариант запроса со свойством tagRequestVar (по умолчанию galTag), то это значение будет использовано как свойство дескриптора для сниппета.

false

useCss

Если верно, то будет использоваться CSS, предоставленные сниппетом Gallery. Установите значение «0», чтобы не загружать CSS, предоставленные сниппетом Gallery.

1 (true)

itemCls

CSS класс для каждого из элементов.

gal-item

activeCls

CSS класс, который нужно добавить к элементу, если он активен.

gal-item-active

linkToImage

Делать прямую ссылку на изображение для каждой пиктограммы или на элемент галереи – пользовательский URL-адрес.

0

linkAttributes

HTML-характеристики для А дескриптора в tpl (файле шаблона) элемента.


imageAttributes

HTML-характеристики для дескриптора изображения в tpl (файле шаблона) элемента.


Чанки приложения Gallery

В приложении задействованы два чанка. Их соответствующие параметры в Gallery:

  • thumbTpl – чанк для каждого из отображаемых элементов
  • containerTpl – по желанию. Если установлен, заключит содержимое в оболочку чанка

Плагины

Приложение Gallery позволяет Вам отображать галереи изображений напрямую через пиктограммы на фронтэнде сайта или при помощи плагинов jQuery. Вы можете ввести имя плагина в свойствах сниппета Gallery (&plugin).

Имейте ввиду, что плагин Galleriffic изменит свойство `thumbTpl` на `gallerifficThumbTpl`, а свойство `containerTpl` на `gallerifficContainerTpl`.

Примеры

Отображает галерею фотографий в альбоме «Мой альбом»:

Отображает галерею фотографий в альбоме «Разное», но использует чанк под названием 'truckThumb' для пиктограмм:

Отображает галерею фотографий в альбоме «Круто» и использует плагин Galleriffic :

 
Захватывает только три фотографии из альбома «Машины» и вставляет в подстановщик "gallery":
 
 
<div class="my-gallery">
</div>


Используя &thumbProperties, установите вывод пиктограмм в 90 процентном качестве jpg вместо png:


 



Чанк Gallery контейнер

Этот чанк используется, когда &containerTpl установлен в сниппете Gallery.

Внимание! Рекомендуем не использовать это свойство и просто заключить в оболочку вывод Вашего ресурса или чанка; это даст Вам большую свободу действий в будущем.

Значение по умолчанию

Для чанка &containerTpl значение по умолчанию не задано; если не указанно особое значение, то вывод не будет заключен ни в одном контейнере.

Доступные подстановщики

Имя

Описание

thumbnails

Созданные пиктограммы

album_name

Имя текущего альбома

album_description

Описание текущего альбома

Чанк, отображающийся в сниппете Gallery со свойством &thumbTpl.

Значение по умолчанию

<div class="
<code></code>
">
    <a href="
<code>documentation/gallery/?gt%3B%5B%5B%2BimageGetParam%5D%5D=%5B%5B%2Bid%5D%5D&lt%3B%2Fcode&gt%3B%0D%0A%3C%2Fpre%3E%3Cpre%3E&gt%3B%5B%5B%2BalbumRequestVar%5D%5D=%5B%5B%2Balbum%5D%5D&lt%3B%2Fcode&gt%3B%0D%0A%3C%2Fpre%3E%3Cpre%3E&gt%3B%5B%5B%2BtagRequestVar%5D%5D=%5B%5B%2Btag%5D%5D</code>
">
        <img class="
<code></code>
"src="
<code></code>
"alt="
<code></code>
"/>
    </a>
</div>

Доступные подстановщики

Имя

Описание

Name (имя)

Имя элемента

Filename (имя файла)

Базовое имя файла элемента

Filesize (размер файла)

Размер файла для элемента

Thumbnail (пиктограмма)

URL-адрес на полученную пиктограмму для указанного элемента

Image (изображение)

URL-адрес на полученное изображение для указанного элемента

image_absolute (начальное изображение)

Фактический URL-адрес изображения (вместо пиктограммы/подстановщиков изображения, которые используются в phpthumb, основанном на свойствах сниппета).

Description (описание)

Описание элемента

Mediatype (медиатип)

Медиатип элемента. На данный момент, это просто 'image' (изображение)

Createdon (создано в…)

Отметка времени, в которое был создан данный элемент

Createdby (создано…)

ID пользователя, создавшего данный элемент

Active (активный)

Показывает активен ли элемент. Может быть со значением «1» или «0».

Tags (метки)

Список меток, связанных с данным элементом

cls

значение свойства &itemCls на сниппете Gallery Значение по умолчанию - 'gal-item'

linkToImage (ссылка на изображение)

Дает прямую ссылку на изображение. Не добавляет подстановщик «imageGetParam» к параметрам запроса. Значение по умолчанию – «1»

imageGetParam (параметры получения изображения)

GET param для использования в случае добавления GET param к ссылке для сниппета Gallery. Значение по умолчанию - 'galItem'

albumRequestVar (запрос)

GET param для связки со сниппетом Gallery. Если кликать по изображению, оно останется в выбранном альбоме с заданным сниппетом

Album (альбом)

Отображение текущего альбома

Сниппет «Альбом галереи»

Этот сниппет отображает список альбомов. По умолчанию захватывает только важные альбомы.

Вы можете установить отображение пиктограммы для каждого альбома и изображения в альбоме, установив свойство "rowTpl" в "galAlbumRowWithCoverTpl" или используя в Вашем пользовательском rowTpl.

Свойства

Имя

Описание

Значение по умолчанию

rowTpl

Чанк для каждого ряда альбомов

galAlbumRowTpl

sort

Поле, по значению которого нужно производить сортировку

createdon

dir

Направление, в котором нужно производить сортировку

DESC

limit

Если задано не нулевое значение, ограничит количество взвратных результатов

10

start

Индекс, с которого начинаются результаты

0

toPlaceholder

Если не пустой, установит вывод к подстановщику с заданным значением


showInactive

Если установлено значение «1», отобразит так же неактивные галереи

0

showAll

Если установлено значение «1», отобразит все альбомы, все зависимости от родительского документа

1

showName

Если установлено значение «0», скроет название альбома

1

parent

Захватывает только альбомы с родительским альбомом с данным ID. Не забудьте установить значение «0» для showAll, иначе он просто не будет работать

0

prominentOnly

Если установлено значение «1», будут отображаться только альбомы с пометкой «Важный»

1

albumCoverSort

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

rank

albumCoverSortDir

Направление при сортировке для получения обложки альбома. Может быть восходящим и нисходящим

ASC

thumbWidth

Ширина пиктограммы для обложки альбома

100

thumbHeight

Высота пиктограммы для обложки альбома

100

thumbZoomCrop

Использовать или нет увеличение и кадрирование для пиктограммы обложки альбома

1

thumbFar

Соотношение сторон для phpThumb с пиктограммой обложки альбома

С

thumbQuality

Качество пиктограммы обложки альбома (от 1 до 100)

90

thumbProperties

JSON параметры для ввода в phpThumb в качестве свойств пиктограммы альбома.


albumRequestVar

Если checkForRequestAlbumVar установлен как «Верно» на сниппете Gallery, будет искать запрос с данным именем для выбранного альбома


prominentOnly

Если установлено значение «1», будут отображаться только альбомы с пометкой «Важный»

true

Чанки альбомов галереи

В приложении задействован только один чанк. Его соответствующий параметр в Gallery:

  • rowTpl – чанк для каждого из отображаемых альбомов.

Примеры

Охватывает список из первых 10 активных, «важных» альбомов:


Захватывает 10 «важных» альбомов, выбранных буквенно-цифровой сортировкой:


 


Захватывает 3 недавно использованных альбома, вне зависимости от важности и устанавливает в подстановщик 'albums':


 


Отображает 3 недавно использованных альбома со случайной обложкой:


<code></code>


Используя &thumbProperties, установите вывод пиктограмм в 90 процентном качестве jpg вместо png:


<code></code>



Чанк rowTpl

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

Значение по умолчанию

<li
<code></code>
><a href="
<code>documentation/gallery/?%5B%5B%2BalbumRequestVar%5D%5D=%5B%5B%2Bid%5D%5D</code>
">
<code></code>
</a></li>

Доступные подстановщики

Имя

Описание

id

ID альбома

name

Название альбома

parent

Родительское ID альбома. Значение по умолчанию «0»

description

Описание альбома

createdon

Отметка времени, в которое был создан данный альбом

createdby

ID пользователя, создавшего данный альбом

rank

Ранг или порядок, в котором сортируются альбомы

active

Есть ли у данного альбома отметка «Активный». Может быть значение «1» или «0»

prominent

Есть ли у данного альбома отметка «Важный». Может быть значение «1» или «0»

albumRequestVar

Параметр albumRequestVar, введенный в сниппет GalleryAlbums. Значение по умолчанию - galAlbum

image

Ссылка на изображение, определенная в сниппете GalleryAlbums

Когда Вы используете подстановщик изображения в шаблоне как ресурс для метки изображения, он не подчиняется свойствам пиктограммы, описанным в сниппете. Но не переживайте, Вы можете добавить свойства самостоятельно, и они фактически станут вызовом для phpthumb. Допустим, Вы хотите создать пиктограмму с размерами 240x160, увеличением и кадрированием. Для этого сделайте следующее:

<img src="
<code>&w=240&h=160&zc=1"alt="</code>
"/>

Сниппет «GalleryItem (Элемент галереи)»

Сниппет GalleryItem отображает единичный элемент галереи.

Свойства

Имя

Описание

Значение по умолчанию

id

ID элемента для отображения


toPlaceholders

Если верно, установит свойства элемента в подстановщики. Если неверно, использует свойство tpl для вывода чанка

1

toPlaceholdersPrefix

По желанию. Добавит префикс к подстановщику, установленному сниппетом. Работает только тогда, когда значение подстановщика верно

galitem

tpl

Чанк для использования, если значение toPlaceholders неверно

galItem

albumTpl

Имя чанка для каждого альбома, включенного в список элемента

galItemAlbum

albumSeparator

Сепаратор для каждого альбома, включенного в список элемента

,

albumRequestVar

Запрос, используемый при связке альбомов

galAlbum

tagTpl

Имя чанка для каждого дескриптора, включенного в список элемента

galItemTag

tagSeparator

Сепаратор для каждого дескриптора, включенного в список элемента

,&nsbp;

tagSortDir

Направление, в котором нужно сортировать дескрипторы, включенные в список элемента

DESC

tagRequestVar

Запрос, используемый при связке дескрипторов

galTag

thumbWidth

Максимальная ширина полученной пиктограммы, в пикселях

100

thumbHeight

Максимальная высота полученной пиктограммы, в пикселях

100

thumbZoomCrop

Использовать или нет увеличение и кадрирование для пиктограммы

1

thumbQuality

Качество пиктограммы. Может быть от 0 до 100

90

thumbFar

Значение "far" для phpThumb пиктограммы, для увеличения с соотношением сторон

С

thumbProperties

JSON параметры для ввода в phpThumb в качестве свойств пиктограммы.


imageWidth

Максимальная ширина полученного изображения

500

imageHeight

Максимальная высота полученного изображения

500

imageZoomCrop

Использовать или нет увеличение и кадрирование для изображения

0

imageQuality

Качество изображения от 0 до 100

90

imageFar

Значение "far" для phpThumb изображения, для увеличения с соотношением сторон

С

imageProperties

JSON параметры для ввода в phpThumb в качестве свойств изображения.


Подстановщики по умолчанию

Когда значение toPlaceholders установлено на «1», GalleryItem автоматически устанавливает подстановщики для этого элемента. По умолчанию в них есть префикс 'galitem', но Вы можете его изменить в параметре toPlaceholdersPrefix. Вот список этх подстановщиков:

Имя

Описание

name

Имя элемента

filename

Имя файла элемента. Оно будет зависимо от пути, который обычно можно обозначить как assets/components/gallery/files/ (массивы/компоненты/галерея/файлы)

description

Описание элемента

mediatype

Медиатип элемента. На данный момент, это просто 'image' (изображение)

createdon

Отметка времени, в которое был создан данный элемент

createdby

ID пользователя, создавшего данный элемент

active

Показывает, активен ли элемент. Может быть со значением «1» или «0».

albums

Список альбомов, содержащих данный элемент

tags

Список меток, связанных с данным элементом

url

Если указан, URL-адрес элемента

Чанк «GalleryItem(Элементгалереи

В приложении задействованы три чанка. Их соответствующие параметры в Gallery:

  • tpl – чанк для использования, если значение toPlaceholders равно «0»
  • albumTpl – чанк для каждого из альбомов, перечисленных в элементе
  • tagTpl - чанк для каждого из дескрипторов, перечисленных в элементе

Примеры

Отображает элемент с ID 12, но только, если он существует:

<code>
 
</code>

Отображает элемент с ID 23, но с использованием чанка под названием «Фото»:

<code></code>

Отображает элемент с ID 432 с использованием чанка под названием «Фото», но разделяет дескрипторы, связанные с ним, вертикальной линией ("|"):

<code></code>

Чанк «GalleryItem's albumTpl»

Чанк, используемый для каждого альбома, связанного с элементом, извлекаемым сниппетом GalleryItem при помощи свойства &albumTpl.

Значение по умолчанию

<code><span class="gal-item-album"><a href="documentation/gallery/?="></a></span></code>

Доступные подстановщики

Имя

Описание

id

ID альбома

name

Название альбома

parent

Родительское ID альбома. Значение по умолчанию «0»

description

Описание альбома

createdon

Отметка времени, в которое был создан данный альбом

createdby

ID пользователя, создавшего данный альбом

rank

Ранг или порядок, в котором сортируются альбомы

active

Есть ли у данного альбома отметка «Активный». Может быть значение «1» или «0»

prominent

Есть ли у данного альбома отметка «Важный». Может быть значение «1» или «0»

albumRequestVar

Параметр albumRequestVar, введенный в сниппет GalleryAlbums. Значение по умолчанию - galAlbum

GalleryItemPagination

Предлагает подстановщики для базовой навигации (предыдущий/следующий) при единичном отображении элемента галереи сниппетом GalleryItem.

Свойства

Сниппет GalleryItem «Нумерация страниц» использует следующие свойства:

Имя

Описание

Значение по умолчанию

curItem

ID текущего изображения. Его можно превзойти URL параметром

1, or an url parameter

checkForRequestVar

Превосходить или нет curItem (текущий URL элемента) URL параметром, указанным в свойстве getParam

1

getParam

URL параметр для использования в checkForRequestVar

galItem

album

ID или название альбома

1

checkForRequestAlbumVar

Превосходить или нет curItem (текущий URL элемента) URL параметром, указанным в свойстве albumRequstVar

1

albumRequestVar

URL параметр для использования в checkForRequestAlbumVar

galAlbum

Подстановщики

GalleryItemPagination устанавливает подстановщики для текущего, предыдущего, следующего, первого и последнего элемента в альбоме. Вы можете найти пространство имён в приведенной ниже таблице. Вы можете использовать те же поля, что и в GalleryItem placeholders, минус альбом и метки.

Имя

Описание

galitem.cur.*

Пространство имени подстановщика для текущего элемента альбома

galitem.prev.*

Пространство имени подстановщика для предыдущего элемента альбома

galitem.next.*

Пространство имени подстановщика для следующего элемента альбома

galitem.first.*

Пространство имени подстановщика для первого элемента альбома

galitem.last.*

Пространство имени подстановщика для последнего элемента альбома

Примеры подстановщиков

Ниже Вы можете найти некоторые обычные подстановщики для GalleryItemPagination, которые можно использовать в Вашем файле шаблона/ресурсе:

Имя

Описание

galitem.cur.id

Подстановщик для текущего ID элемента альбома

galitem.prev.id

Подстановщик для предыдущего ID элемента альбома

galitem.next.id

Подстановщик для следующего ID элемента альбома

galitem.first.id

Подстановщик для первого ID элемента альбома

galitem.last.id

Подстановщик для последнего ID элемента альбома

galitem.next.filename

Имя файла следующего элемента

galitem.cur.description

Описание текущего элемента

Примеры GalleryItemPagination

Отобразите базовую навигацию для элемента GalleryItem и используйте предыдущий и следующий подстановщики.

Создайте сниппет 'GalleryItemPagination'

Прежде всего, создайте сниппет. Назовите его 'GalleryItemPagination' и сохраните.

<code><!--?php

// First instantiate the Gallery package

--->addPackage('gallery',$modx->getOption('gallery.core_path',$config,$modx->getOption('core_path').'components/gallery/').'model/');

 

$curItem= $modx->getOption('curItem',$scriptProperties,1);

if($modx->getOption('checkForRequestVar',$scriptProperties,true)) {

    $getParam= $modx->getOption('getParam',$scriptProperties,'galItem');

    if(!empty($_REQUEST[$getParam])) { $curItem= (int)$_REQUEST[$getParam]; }

}

if(empty($curItem)) return'';

 

$album= $modx->getOption('album',$scriptProperties,1);

if($modx->getOption('checkForRequestAlbumVar',$scriptProperties,true)) {

    $albumRequestVar= $modx->getOption('albumRequestVar',$scriptProperties,'galAlbum');

    if(!empty($_REQUEST[$albumRequestVar])) $album= $_REQUEST[$albumRequestVar];

}

// We pass the album name/ID to an &album property and find the gallery object

if(!is_int($album)) {

    $gallery= $modx->getObject('galAlbum',array('name'=> $album));

    if($galleryinstanceofgalAlbum)

        $album= $gallery->get('id');

}

 

$c= $modx->newQuery('galAlbumItem');

$c->innerJoin('galItem','Item');

$c->where(

    array(

        'album'=> $album,

    )

);

$c->select(

    array(

        'galAlbumItem.*',

        'Item.*',

    )

);

 

$c->sortby('rank','asc');

 

$collection= $modx->getCollection('galAlbumItem',$c);

 

$items= array();

foreach($collectionas$i) {

    $items[] = $i->toArray();

}

 

$continue= true;

$i= 0; $prev= array(); $cur= array(); $next= array();

while($continue) {

    $prev= $cur;

    $cur= $items[$i];

    if($cur['id'] == $curItem) {

        $next= $items[$i+1];

        $continue= false;

    }

    $i++;

}

$first= $items[0];

$last= $items[count($items)-1];

$phs['galitem.cur.'] = $cur;

$phs['galitem.prev.'] = $prev;

$phs['galitem.next.'] = $next;

$phs['galitem.first.'] = $first;

$phs['galitem.last.'] = $last;

 

$modx->setPlaceholders($phs);

 

return'';</code>

Теперь настройте Ваш подстановщик для навигации:

<code>    




`]]</code>



Чанк GalleryItem's tpl

Этот чанк используется, когда значение &toPlaceholders равно «0» на сниппете GalleryItem.

Значение по умолчанию

 <code><a href="">
    <img src="" alt="" />
</a></code>

Доступные подстановщики

Имя

Описание

name

Имя элемента

filename

Имя файла элемента. Оно будет зависимо от пути, который обычно можно обозначить как assets/components/gallery/files/ (массивы/компоненты/галерея/файлы)

description

Описание элемента

mediatype

Медиатип элемента. На данный момент, это просто 'image' (изображение)

createdon

Отметка времени, в которое был создан данный элемент

createdby

ID пользователя, создавшего данный элемент

active

Показывает, активен ли элемент. Может быть со значением «1» или «0»

albums

Список альбомов, содержащих данный элемент

tags

Список меток, связанных с данным элементом

Плагин Gallerriffic

Этот плагин позволяет быстро выводить галерею и отображать изображения в ней. Плагин требует загруженного на странице jQuery для корректной работы.

Использование

Просто добавьте этот плагин в сниппет Gallery:

<code></code>

Доступные свойства

Galleriffic превзойдет следующие свойства в сниппете Gallery. Если Вы хотите их превзойти, просто введите вместо начальных свойств, свойства с префиксом «galleriffic».

Имя

Превосходит

Описание

Значение по умолчанию

gallerifficThumbTpl

thumbTpl

Чанк метки для каждого из элементов

GallerifficItemThumb

gallerifficContainerTpl

containerTpl

Чанк-контейнер, в который заключается содержание

Galleriffic

gallerifficThumbWidth

thumbWidth

Ширина пиктограммы

75

gallerifficThumbHeight

thumbHeight

Высота пиктограммы

75

Так же Galleriffic выпускается с несколькими собственными свойствами. Вы можете ввести эти свойства, чтобы превзойти настройки по умолчанию Gallery.

Имя

Описание

Значение по умолчанию

numThumbs

Количество отображаемых пиктограмм на страницу

15

navigationWidth

Ширина навигационной панели в пикселях

300px

enableTopPager

Показывать или нет верхнюю нумерацию страниц

1

enableBottomPager

Показывать или нет нижнюю нумерацию страниц

1

maxPagesToShow

Максимальное число страниц для отображения

7

renderSSControls

Визуализировать или нет элементы управления слайд-шоу

1

renderNavControls

Визуализировать или нет навигационные элементы управления

1

enableHistory

Нужно ли включать историю

0

autoStart

Начинать или нет автоматический показ слайд-шоу

0

defaultTransitionDuration

Продолжительность перехода в миллисекундах

500

thumbsContainerSel

CSS-селектор для контейнера, содержащего пиктограммы

#gal-gaff-thumbs

imageContainerSel

CSS-селектор для контейнера, содержащего основное изображение

#gal-gaff-slideshow

captionContainerSel

CSS-селектор для контейнера, содержащего титры

#gal-gaff-caption

controlsContainerSel

CSS-селектор для контейнера, содержащего навигационные элементы управления

#gal-gaff-controls

loadingContainerSel

CSS-селектор для контейнера, содержащего экран загрузки

#gal-gaff-loading

playLinkText

Текст, используемый для ссылки на проигрывание слайд-шоу


pauseLinkText

Текст, используемый для ссылки на паузу в слайд-шоу


prevLinkText

Текст, используемый для ссылки на предыдущее фото в слайд-шоу


nextLinkText

Текст, используемый для ссылки на следующее фото в слайд-шоу


prevPageLinkText

Текст, используемый для ссылки на предыдущую страницу слайд-шоу


nextPageLinkText

Текст, используемый для ссылки на следующую страницу слайд-шоу


Примеры

Используйте плагин Galleriffic, но отобразите только 10 меток на страницу:

<code> </code>


Спрячьте нумерацию страниц и покажите элементы управления слайд-шоу, но начните слайд-шоу автоматически:

<code>   </code>



Плагин Gallery «Slimbox»

Этот плагин позволяет быстро выводить приложение Gallery и отображать пиктограммы изображений с простым полупрозрачным наложением, когда Вы нажимаете на пиктограмму. Используется Slimbox2 plugin для jQuery.

Использование

Просто добавьте этот параметр для сниппета Gallery:


<code></code>

Доступные свойства

Slimbox выпускается с несколькими собственными свойствами. Вы можете ввести эти свойства, чтобы превзойти настройки по умолчанию Gallery.

Имя

Описание

Значение по умолчанию

slimboxUseCss

Со значением «1» будет использовать предоставленный слимбокс CSS-файла

1

slimboxCss

Если значение slimboxUseCss равно 1, то загрузит CSS-файл с данным свойством. Если значение не установлено, будет использовано предоставленное свойство

{slimbox_url}packages/slimbox/css/slimbox2.css

slimboxRenderJsOnStartup

Загрузите Slimbox JS в заголовке страницы. Если значение «0», то загрузится внизу страницы

1

slimboxLoadJQuery

Если установлено значение «1», то добавит JQuery в загрузку страницы. Оставьте «0», если Вы уже загрузили JQuery (рекомендуется)

0

slimboxJQueryUrl

Если значение slimboxLoadJQuery равно «1», загрузит файл jQuery JS с данного URL-адреса

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2...

slimboxJsTpl

Чанк файла шаблона для slimbox JS. Вы можете пропустить эту настройку в большинстве случаев

slimbox/js

Ниже представлены настройки, влияющие на поведение Slimbox

Имя

Описание

Значение по умолчанию

loop

Если установлено значение «1», позволяет пользователю перемещаться между первым и последним изображением в галерее Slimbox, если существует более одного изображения для показа

0

overlayOpacity

Уровень прозрачности фонового наложения. «1» - непрозрачный, «0» - полностью прозрачный

0.8

overlayFadeDuration

Длительность постепенного появления и затухания анимации наложения в миллисекундах. Установите «0» для деактивации данных эффектов

400

resizeDuration

Длительность анимации изменения ширины и высоты в миллисекундах. Установите «0» для деактивации анимации

400

resizeEasing

Название модификации, которую Вы хотите применить для анимированного изменения размеров (требуется плагин jQuery Easing для всех эффектов, кроме «раскачивания»). Множество модификаций требует более длительное время для выполнения, чтобы все выглядело красиво, поэтому так же отрегулируйте опцию resizeDuration

swing

initialWidth

Начальная ширина блока наложения в пикселях

250

initialHeight

Начальная высота блока наложения в пикселях

250

imageFadeDuration

Длительность постепенного появления изображения в миллисекундах. Установите «0» для деактивации данных эффектов и немедленного появления изображения

400

captionAnimationDuration

Длительность постепенного появления титров в миллисекундах. Установите «0» для деактивации данных эффектов и немедленного появления титров

400

counterText

Значение текста. Позволяет Вам подстраивать, переводить или деактивировать текст, который появляется в титрах при множественном показе изображений. Внутри текста {x} будет заменен текущим индексом изображения, а {y} заменит общее количество изображений. Установите неверное значение (булево значение без кавычек) или "" для деактивации счетчика

"Image {x} of {y}"

Примеры

Загрузите Slimbox для альбома с ID 2 и сделайте повторяющийся цикл. Так же, загрузите jQuery:

<code></code>



Загрузите Slimbox для альбома с ID 2 и поставьте JS и CSS внизу страницы:

<code></code>



Настройка Вашей Галереи

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

Загрузка Ваших фотографий

Вам нужно показать несколько фото, поэтому их нужно загрузить перед настройкой дисплея:

  • В верхнем меню менеджера перейдите в Компоненты->Галерея
  • Нажмите «Создать альбом»
  • Введите имя и описание Вашего альбома
  • Поставьте галочку в поле «Активный»
  • Нажмите «Сохранить»

Теперь – правый клик, в открывшемся меню выберите пункт «Обновить альбом». Сейчас выберите «Единичная загрузка» или «Пакетная загрузка» и загрузите несколько фотографий.

Отображение Ваших фотографий

Прежде всего, введите данный код в Ваш ресурс:

<div style="float: right">
<h2>Galleries</h2>
<ul>
<code></code>
</ul>
</div>
 
<h2>Item</h2>
 
<code></code>
 
<hr />
 
<code></code>
<h1><a href="
<code>documentation/gallery/</code>
">
<code></code>
</a></h1>
<p>
<code></code>
</p>
 
<code> </code>

Готово! Теперь все работает. Давайте рассмотрим каждую часть отдельно.

Создание списка альбомов галереи

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

<code class="php plain"><div style=</code><code class="php string">"float: right"</code><code class="php plain">></code>
<code class="php plain"><h2>Galleries</h2></code>
<code class="php plain"><ul></code>
<code></code>
<code class="php plain"></ul></code>
<code class="php plain"></div></code>

Мы запустили сниппет GalleryAlbums. Теперь, на нашем HTML мы перенесли его вправо – Вам этого делать не нужно. Мы сделали это для сохранения "недвижимости" экрана. Готово. Сейчас GalleryAlbums будет отображать список альбомов и по ним можно кликать.

Отображение выбранных альбомов

Теперь, когда Вы кликнули на альбоме, нужно, чтобы отображались изображения из этого альбома. К счастью, сниппет Gallery работает в тандеме со сниппетом GalleryAlbums, поэтому нужно сделать только следующее:

<code></code>
<code class="php plain"><h1><a href=</code><code class="php string">"</code>
<code>documentation/gallery/</code>
<code class="php string">"</code><code class="php plain">></code>
<code></code>
<code class="php plain"></a></h1></code>
<code class="php plain"><p></code>
<code></code>
<code class="php plain"></p></code>
 
<code></code>

Мы установили галереи для начального отображения альбома с ID 1. Если нажать на ссылку сниппета GalleryAlbums, ее значение превзойдет предыдущее, но сейчас нам нужно начать с альбома № 1. Так же, мы установили это значение для подстановщика с названием 'gallery', поэтому можем вывести некоторую информацию об альбоме, например, его название и описание.

Показывать увеличенное изображение

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

<code></code>
<code class="php plain"></code>

Сниппет GalleryItem ищет параметр "galItem" в URL-адресе. Когда он его найдет, загрузит изображение из альбома. Сниппет Gallery использует его для URL-адресов для пиктограмм. Далее, мы выводим некоторые метаданные, такие как имя, альбомы, метки и ссылку на них.

Теперь мы закончили! Можете немедленно приступать к использованию Gallery!

Заключение

Есть еще множество функций этого приложения, но мы надеемся, что это краткое руководство дало Вам представление о том, как все элементы взаимодействуют друг с другом.

Пользовательский TV для GalleryItem

Приложение Gallery выпускается с пользовательским типом ввода и вывода для TV (переменные шаблона) в версии Revolution. Это позволяет Вам получать классное размещение изображений в Вашем ресурсе. Вы можете кадрировать, изменять размер, вращать изображения и использовать множество других функций при помощи TV:

Настройка TV

Сначала нужно настроить TV. Создайте ее:

  1. загрузите и создайте страницу переменных шаблона и дайте имя вашей TV
  2. выберите тип ввода 'galleryitem'
  3. выберите тип вывода 'galleryitem'
  4. назначьте TV для шаблона
  5. сохраните!

Теперь Вы должны видеть Ваш TV в ресурсе с шаблонами, для которых Вы эту переменную назначили.

Использование TV

Теперь выберите «Выбрать изображение» и укажите альбом в дереве слева. После, выберите фото, которое хотите использовать – фото загрузится в полном размере в редактор фотографий. Теперь Вы можете изменять размер (так же кадрировать), вращать фотографию и использовать множество других функций.

Когда Вы закончите редактирование изображения, поместите метки TV в Ваш контент. Например, если Ваша переменная называлась “Photo”, поместите в Ваш контент:

<code></code>

Теперь приложение автоматически визуализирует изображение и помещает его в нужное место.




Контактная информация

По всем интересующим вас вопросам связывайтесь при помощи контактной информации приведенной на этой странице!

telegram: @Accusser
skype: metsof
email: accusser@gmail.com

В социальных сетях...

Форма обратной связи

Sign In