Галерея Gallery

Опубликовано: 04 Мая 2014

Gallery – позволяет создавать галереи изображений, сортировать и маркировать их.

Параметр

Описание

По умолчанию

Пример

&album

Вывод элементов из заданного альбома. Имя или id альбома.

нет

&album=`4`

&tag

Вывод элементов с заданным тегом.

нет

&tag=`gallery`

&plugin

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

нет

 

&thumbTpl

Чанк, используемый в качестве шаблона вывода миниатюрных изображений.

galItemThumb

&thumbTpl=` newThumb `

&containerTpl

Дополнительный чанк для  обертки вывода

нет

&containerTpl=` newTpl`

&toPlaceholder

Помещает вывод сниппета в плэйсхолдер с заданным именем.

нет

&toPlaceholder=` name`

&thumbWidth

Ширина эскиза, в пикселях.

100

&thumbWidth=`456`

&thumbHeight

Высота эскиза, в пикселях.

100

&thumbHeight=`456`

&thumbZoomCrop

Использование увеличения в эскизах

1

&thumbZoomCrop=`0`

&thumbFar

Соотношение сторон для phpThumb с эскиза. В размере, указанном в параметрах «w» и «h» (должны быть заданы оба). Выравнивание: L = слева, R = справа, T = сверху, B = снизу, C = центр. Задаётся для BL, BR, TL, TR в изображениях, пейзаж или портрет.

 

C

&thumbFar=`R`

&thumbQuality

Качество эскизов, в диапозоне: 0-100.

90

&thumbQuality=`45`

&thumbProperties

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

нет

 

&imageWidth

При использовании плагина, максимальная ширина изображения.

500

&imageWidth=`800`

&imageHeight

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

500

&imageHeight=`800`

&imageZoomCrop

Использование технологии zoomcrop.

нет

&imageZoomCrop=`1`

& imageFar

Соотношение сторон изображений для phpThumb.

 

 

&imageQuality

При использовании плагина, качество изображений, в диапозоне: 0-100.

90

&imageQuality=`45`

&imageProperties

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

 

 

&sort

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

rank

&sort=`rand`

&dir

Обычный или обратный вывод изображений.

ASC

DESC

&limit

Задаёт лимит вывода изображений. Ноль значит выводить все.

0

&limit=`7`

&start

При ограничении числа вывода изображений, означает вывод с заданного числа.

0

&start=`5`

&albumRequestVar

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

galAlbum

&albumRequestVar=` newAlbum `

&checkForRequestAlbumVar

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

false

&checkForRequestAlbumVar=`true`

&tagRequestVar

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

galTag

 

&checkForRequestTagVar

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

false

&checkForRequestTagVar=`true`

&useCss

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

1

&useCss=`0`

&itemCls

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

gal-item

&itemCls=`new_gal-item `

&activeCls

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

gal-item-active

&activeCls=`new_gal-item-active `

&linkToImage

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

0

&linkToImage=`1`

&linkAttributes

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

 

 

&imageAttributes

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

 

 

 Чанки Gallery

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

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

Плагины

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

  • Slimbox - водит приложение Gallery и отображает пиктограммы изображений с простым полупрозрачным наложением, когда вы нажимаете на пиктограмму;
  • Galleriffic - выводит галерею и отображает изображения в ней;

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

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

Сниппет Gallery можно вызвать при помощи следующего вызова:

[ [Gallery? &album=`My Album`]][ [GalleryAlbums? &limit=`10`]]

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

[ [!Gallery? &album=`Trucks` &thumbTpl=`truckThumb`]]

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

 [ [!Gallery? &tag=`Different` &plugin=`Galleriffic`]]

Захватывает только три фотографии из альбома «Отели» и вставляет в подстановщик "gallery":

 [ [!Gallery? &limit=`3` &album=`Hotels` &toPlaceholder=`gallery`]]
<div class="my-gallery">[ [+gallery]]</div>

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

 [ [!Gallery? &album=`My Album` &thumbProperties=`{"f":"jpg","q":"90%"}`]]

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

Комментарии (2)

  1. wind:
    16.11.2016г. в 13:02


    Здравствуйте! Подскажите, пожалуйста, как сделать, чтобы миниатюры были одной ширины, а высота задавалась пропорционально оригиналу? Если не указывать параметр thumbHeight, то высота задается 100px, если оставить пустым, то миниатюра квадратная.

  2. natali:
    26.11.2016г. в 20:22

    Здравствуйте, за ширину отвечает параметр thumbWidth.


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: