Возможности PSSGallery 2.0. Скриншоты.

  • Быстрая установка. Всего 7 шагов.
  • Backend администрирование. Галерея редактируется через административную часть , на странице редактирования документа!
  • Drag and Drop - смена позиций фотографий
  • Возможность добавления Alt и Title к изображению
  • 3 вида встроеных галерей - fancybox, lightbox, visuallightbox.
  • Поддержка браузеров: IE7+ (включая IE10), Firefox, Safari, Chrome, Opera
  • Поддержка в Ditto - в TV параметр записывается фотография, указанная в галереи как "превью".
  • Многоязычность - возможность локализовать галерею под любой язык.
  • Smart скрытие фотографий - не опубликованные фотографии в управлении галерей подсвечиваются серым цветом.
  • Сортировка фотографий по имени, позиции, дате создания.
  • Два вида алгоритмов сжатия изображений: proportional и smart.
  • Smart алгоритм сжатия фотографий - Вам больше не надо думать о размерах "миниатюр", фотография принимает указанные размеры в любом случае, вне зависимости от того горизонтальная она или вертикальная.
  • 3 вида watermark: фото, встроенный шрифт и заливка произвольного шрифта ttf.
  • Множественная загрузка фотографий
  • Постраничное разбиение фотогалереи
  • Шаблонизация всех элементов галереи
  • Поддержка по почте и форум
  • Box режим сжатия - если размер сжимаемой фотографии меньше, требуемых размеров, то создается новая фотография с требуемыми размерами ,а пустое пространство закрашивается в цвет фона.

Установка PSSGallery 2.0 для Modx Evo.

№ Шага Описание действий по установке Галереи modx
1 Скачиваем архив галереи по ссылке.
2 Копируем все содержимое папки в корень сайта.
3 Создаем сниппет PSSGallery и вставлем в него следующие строки:
<?php include 'assets/snippets/pss_gallery/index.php'; ?>
5 Создаём плагин PSSGalleryPlugin на событие OnEmptyTrash и вставлем в него следующие строки:
include MODX_BASE_PATH."assets/plugins/pss_gallery/index.php";
6 Создаём tv параметр PSSGalleryTV c типом Сustom Input. В поле возможные значения добавляем следующие строки:
@INCLUDE: assets/widgets/pss_gallery/index.php
Выбираем шаблоны в которых хотим отображать галерею.
7 В шаблоне вызываем сниппет PSSGallery:
[!PSSGallery?type=`lightbox`&tWidth=`200`&tHeight=`200`&gWidth=`800`&gHeight=`600`!]

Параметры сниппета PSSGallery

1. Общие параметры галереи

Название Возможные значения Описание
1 &type lightbox|visuallightbox|fancybox|custom lightbox,visuallightbox,fancybox - выводятся стандартные галереи одного из этих типов. custom - рендер отрисует только HTML код, без подключения JS галереи.
2 &docId Идентификатор документа По умолчанию текущий документ, можно указать id любого документа у которого есть галерея
3 &emptyShow 0|1 Выключить/выключить отображение пустой галереи
4 &sortBy name|position|dateUpload Cортировка изображений
5 &order asc|desc Порядок сортировки изображений
6 &count число Количество выводимых изображений
7 &lang название языка По умолчанию russian-UTF8
8 &visible 1|0 Включить/Выключить отрисовку галереи
9 &emptyTpl чанка Шаблон оформления пустой галереи
10 &imagesTpl чанка Шаблон оформления галереи
11 &imageTpl чанка Шаблон оформления изображения в галереи

2. Параметры для больших изображений

Название Возможные значения Описание
1 &gWidth число Максимальная ширина
2 &gHeight число Максимальная высота
3 &gResizeType proportional | smart Алгоритм сжатия изображения
4 &gBox 1|0 Если размер сжимаемой фотографии меньше, требуемых размеров, то создается новая фотография с требуемыми размерами ,а пустое пространство закрашивается в цвет фона (tBackgroundColor).
5 &gQuality число от 1 до 100 Качество сжатия изображения
6 &gBackgroundColor hex Цвет фона изображения. По умолчанию #000000
7 &gwatermark null | image | font Тип вотермарки
8 &gwatermarkFont путь к файлу Например assets/snippets/pss_gallery/res/TIMCYRBI.TTF
9 &gwatermarkImage путь к файлу Например assets/snippets/pss_gallery/res/watermark.png
10 &gwatermarkPositionHorizontal left|center|right или число left - левый край изображения
center - середина изображения
right - правый край изображения
Положительное число - количество пикселей на сколько необходимо отступить от левого края изображения
Отрицательное число - количество пикселей на сколько необходимо отступить от правого края изображения
11 &gwatermarkPositionVertical top|center|bottom или число top - верхний край изображения
center - середина изображения
right - нижний край изображения
Положительное число - количество пикселей на сколько необходимо отступить от верхнего края изображения
Отрицательное число - количество пикселей на сколько необходимо отступить от нижнего края изображения
12 &gwatermarkText текст Текст для вотермарки
13 &gwatermarkTextColor hex Цвет текста вотермарки.По умолчанию #000000
14 &gwatermarkTextSize 1|2|3|4|5 или 1-100 Размер текста вотермарки
Если gwatermark=`text` то размер может быть 1-5.
Если gwatermark=`font` то размер может быть любым
15 &gwatermarkParent box|image Если указано свойство Box, то позиционирование вотермарки будет осуществлятся относительно Box-a, а если image то относительно полученного изображения.

3. Параметры миниатюр

Название Возможные значения Описание
1 &tWidth число Максимальная ширина миниатюры
2 &tHeight число Максимальная высота миниатюры
3 &tImageClass строка Название CSS класса для миниатюры
4 &tResizeType proportional | smart Алгоритм сжатия миниатюры. Используйте smart. Это умный алгоритм сжатия. В этом случае не нужно беспокоится о пропорциях изображения. Миниатюры будут всегда одного размера вне зависимости от пропорций миниатюры и исходного изображения.
5 &tBox 1|0 Очень полезное свойствоЕсли размер сжимаемой фотографии меньше, требуемых размеров, то создается новая фотография с требуемыми размерами ,а пустое пространство закрашивается в цвет фона (tBackgroundColor).
6 &tQuality число от 1 до 100 Качество сжатия ихображения
7 &tBackgroundColor hex Цвет фона изображения. По умолчанию #000000
8 &twatermark null | image | font Тип вотермарки
9 &twatermarkFont путь к файлу Например assets/snippets/pss_gallery/res/TIMCYRBI.TTF
10 &twatermarkImage путь к файлу Например assets/snippets/pss_gallery/res/watermark.png
11 &twatermarkPositionHorizontal left|center|right или число left - левый край изображения
center - середина изображения
right - правый край изображения
Положительное число - количество пикселей на сколько необходимо отступить от левого края изображения
Отрицательное число - количество пикселей на сколько необходимо отступить от правого края изображения
12 &twatermarkPositionVertical top|center|bottom или число top - верхний край изображения
center - середина изображения
right - нижний край изображения
Положительное число - количество пикселей на сколько необходимо отступить от верхнего края изображения
Отрицательное число - количество пикселей на сколько необходимо отступить от нижнего края изображения
13 &twatermarkText текст Текст для вотермарки
14 &twatermarkTextColor hex Цвет текста вотермарки.По умолчанию #000000
15 &twatermarkTextSize 1|2|3|4|5 или 1-100 Размер текста вотермарки
Если gwatermark=`text` то размер может быть 1-5.
Если gwatermark=`font` то размер может быть любым
16 &twatermarkParent box|image Если указано свойство Box, то позиционирование вотермарки будет осуществлятся относительно Box-a, а если image то относительно полученного изображения.
17 &tPaging 1|0 Включить/Отключить постраничный вывод миниатюр
18 &tPagingTpl 1|0 Шаблон пагинации
19 &tPagingOnPage число количество миниатюр на странице
20 &tPagingCols число Количество миниаютр в строке. Добавлет CSS класс row к миниатюре являющейся первой в своей строке
21 &tPagingPageTpl чанк Шаблон ссылки в пагинации
22 &tPagingPageDisabledTpl чанк Шаблон текущий ссылки в пагинации
23 &tPagingFirst 1|0 Включить/Выключить отображение ссылки "Первая страница" в пагинации
24 &tPagingNext 1|0 Включить/Выключить отображение ссылки "Вперед" в пагинации
25 &tPagingPrevious 1|0 Включить/Выключить отображение ссылки "Предыдущая страница" в пагинации
26 &tPagingLast 1|0 Включить/Выключить отображение ссылки "Последняя страница" в пагинации
27 &tPagingFirstTpl чанк Шаблон сылки "Первая страница" в пагинации
28 &tPagingFirstDisabledTpl чанк Шаблон текущий ссылки "Первая страница" в пагинации
29 &tPagingNextTpl чанк Шаблон сылки "Вперёд" в пагинации
30 &tPagingNextDisabledTpl чанк Шаблон текущий ссылки "Вперёд" в пагинации
31 &tPagingPreviousTpl чанк Шаблон сылки "Предыдущая страница" в пагинации
32 &tPagingPreviousDisabledTpl чанк Шаблон текущий ссылки "Предыдущая страница" в пагинации
33 &tPagingLastTpl чанк Шаблон сылки "Последняя страница" в пагинации
34 &tPagingLastDisabledTpl чанк Шаблон текущий ссылки "Последняя страница" в пагинации

Вывод изображения в сниппете Ditto

"Превью" галери - это изображени , которое будет сохранено в TV параметре галереи. Его можно использовать например в Ditto.
Внимание! Настройка превью галереи осуществлятся через конфигурацияонный файл /assets/wdigets/configs/preview.php. Пример конфига:

                            $pss_gallery_preview_config = array(
                    "13" => array( 
                        "pWidth" => 300,
                        "pHeight" => 300
                   ),
                   "5" => array( 
                        "pWidth" => 200,
                        "pHeight" => 200,
                        "pResizeType" => "propotional",   
                        "pBox" => 1,
                        "pBackgroundColor" => '#0000ff' 
                    )
                );
            
Первый параметр в конфиге означает ID шаблона, второй - параметры для "Превью" галереи. В нашем случае для шаблона с id=13 формируется "Превью" c размером 300x300. Важный момент: при изменении параметров в файле конфигурации, старые "Превью" не изменятся. Для выхода из этой ситуации необходимо в управлении галерей нажать на изображение с зеленой рамкой (это и есть "Превью") и в режиме редактирования нажать "Сохранить". Это не очень удобно так как страниц может быть очень много, поэтому рекомендую заранее продумать размеры "Превью". Позже напишу отдельный модуль по обновлению "Превью".

Название Возможные значения Описание
1 &pWidth число Максимальная ширина
2 &pHeight число Максимальная высота
3 &pResizeType proportional | smart Алгоритм сжатия изображения
4 &pBox 1|0 Если размер сжимаемой фотографии меньше, требуемых размеров, то создается новая фотография с требуемыми размерами ,а пустое пространство закрашивается в цвет фона (tBackgroundColor).
5 &pQuality число от 1 до 100 Качество сжатия изображения
6 &pBackgroundColor hex Цвет фона изображения. По умолчанию #000000
7 &pwatermark null | image | font Тип вотермарки
8 &pwatermarkFont путь к файлу Например assets/snippets/pss_gallery/res/TIMCYRBI.TTF
9 &pwatermarkImage путь к файлу Например assets/snippets/pss_gallery/res/watermark.png
10 &pwatermarkPositionHorizontal left|center|right или число left - левый край изображения
center - середина изображения
right - правый край изображения
Положительное число - количество пикселей на сколько необходимо отступить от левого края изображения
Отрицательное число - количество пикселей на сколько необходимо отступить от правого края изображения
11 &pwatermarkPositionVertical top|center|bottom или число top - верхний край изображения
center - середина изображения
right - нижний край изображения
Положительное число - количество пикселей на сколько необходимо отступить от верхнего края изображения
Отрицательное число - количество пикселей на сколько необходимо отступить от нижнего края изображения
12 &pwatermarkText текст Текст для вотермарки
13 &pwatermarkTextColor hex Цвет текста вотермарки.По умолчанию #000000
14 &pwatermarkTextSize 1|2|3|4|5 или 1-100 Размер текста вотермарки
Если gwatermark=`text` то размер может быть 1-5.
Если gwatermark=`font` то размер может быть любым
15 &pwatermarkParent box|image Если указано свойство Box, то позиционирование вотермарки будет осуществлятся относительно Box-a, а если image то относительно полученного изображения.

Плейсхолдеры сниппета PSSGallery

Шаблон emptyTpl

Название Описание
1 [+lang.empty+] Значение из файла локализации

Шаблон оформления галереи imagesTpl

Название Описание
1 [+images+] Изображения галереи
1 [+paging+] Шаблон пагинации tPaginTpl
1 [+images.count+] Количество изображений
В этом шаблоне также доступны плейсхолдеры из шаблонов tPagingTpl

Шаблон оформления изображения imageTpl

Название Описание
1 [+images.image.url_gallery_image+] Ссылка на большое изображение
2 [+images.image.title+] Title изображения
3 [+images.image.alt+] Alt изображения
4 [+images.image.row+] Класс для первого элемента в строке
5 [+images.image.url_thumbnail_image+] Ссылка на миниатюру изображения
5 [+images.image.file_gallery_name+] Имя файла большого изображения

Шаблон оформления пагинации tPagingTpl.

Название Описание
1 [+paging.page.first+] Шаблон для ссылки "Первая страница"
2 [+paging.page.next+] Шаблон для ссылки "Следующая страница"
3 [+paging.page.previous+] Шаблон для ссылки "Предыдущая страница"
4 [+paging.page.last+] Шаблон для ссылки "Последняя страница"
5 [+paging.page.pages+] Шаблон для ссылок пагинации
6 [+paging.onpage+] Количество изображений на странице
7 [+paging.page_count+] Количество страниц
8 [+paging.current+] Текущая страница

Шаблоны оформления ссылок в пагинации tPagingPageTpl, tPagingPageDisabledTpl, tPagingFirst, tPagingNext, tPagingPrevious, tPagingLast, tPagingFirstTpl, tPagingFirstDisabledTpl, tPagingNextTpl, tPagingNextDisabledTpl, tPagingPreviousTpl, tPagingPreviousDisabledTpl, tPagingLastTpl, tPagingLastDisabledTpl

Название Описание
1 [+paging.page.class+] СSS класс ссылки. Может быть - last,first,current,next,previous
2 [+paging.page.url+] Ссылки
3 [+paging.page.name+] Название ссылки

Примеры использования PSSGallery

1. Smart(Умное) сжатие

Smart сжатие фотографий по 2 сторонам(без Box)

Код вызова сниппета:
[!PSSGallery?type=`lightbox`&tHeight=`150`&tWidth=`150`&gWidth=`800`&gHeight=`600`
&tResizeType=`smart`&tBox=`0`&gResizeType=`proportional`&gBox=`0`!]

Smart сжатие фотографий по 2 сторонам(c Box)

Код вызова сниппета:
[!PSSGallery?type=`lightbox`&tHeight=`200`&tWidth=`200`&gWidth=`800`&gHeight=`600`
&tResizeType=`smart`&tBox=`0`&tBackgroundColor=`#000000`&gResizeType=`proportional`&gBox=`0`!]!]

2. Пропорциональное сжатие

Пропорциональное сжатие миниатюр по одной стороне

Код вызова сниппета:
[!PSSGallery?type=`lightbox`&tHeight=`100`&gWidth=`800`&gHeight=`600`&tResizeType=`proportional`
&tBox=`0`&gResizeType=`proportional`&gBox=`0`!]

Пропорциональное сжатие миниатюр по двум сторонам(без Box)

Код вызова сниппета:
[!PSSGallery?type=`lightbox`&tWidth=`150`&tHeight=`100`&gWidth=`800`&gHeight=`600`
&tResizeType=`proportional`&tBox=`0`&gResizeType=`proportional`&gBox=`0`!]

Пропорциональное сжатие миниатюр по двум сторонам(c Box)

Код вызова сниппета:
[!PSSGallery?type=`lightbox`&tWidth=`150`&tHeight=`100`&gWidth=`800`&gHeight=`600`
&tResizeType=`proportional`&tBox=`1`&tBackgroundColor=`#000000`&gResizeType=`proportional`&gBox=`0`!]!]

3. Вотермарки

Пример1. Для вотермарки больших фотографий используется - изображение ,а для вотермарки миниатюр - шрифт.

Код вызова сниппета:
[!PSSGallery?type=`lightbox`&tHeight=`200`&tWidth=`200`&tResizeType=`smart`&tBox=`0`
&twatermark=`font`&twatermarkText=`Вотермарка`&twatermarkTextColor=`#e20036` &twatermarkTextSize=`15`&twatermarkPositionHorizontal=`center`&twatermarkPositionVertical=`bottom`
&gWidth=`800`&gHeight=`600`&gResizeType=`proportional`&gBox=`0`&gwatermark=`image`
&gwatermarkImage=`assets/images/watermark.png`&gwatermarkPositionHorizontal=`left`
&gwatermarkPositionVertical=`top`!]

Smart сжатие фотографий c Box и параметром [t,g]watermarkParent

Код вызова сниппета:
[!PSSGallery?type=`lightbox`&tHeight=`200`&tWidth=`200`&tResizeType=`smart`&tBox=`1`
&twatermark=`font`&twatermarkText=`Вотермарка`&twatermarkTextColor=`#e20036`
&twatermarkTextSize=`15`&twatermarkPositionHorizontal=`center`&twatermarkPositionVertical=`bottom`
&twatermarkParent=`image`&tBackgroundColor=`#000000`&gWidth=`800`&gHeight=`600`&
gResizeType=`proportional`&gBox=`1`&gwatermark=`image`
&gwatermarkImage=`assets/images/watermark.png`&gwatermarkPositionHorizontal=`left`
&gwatermarkPositionVertical=`top`&gwatermarkParent=`box`&gBackgroundColor=`#000000`!]

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

Пример1. Пагинация со всеми кнопками навигации

Код вызова сниппета:
[!PSSGallery?type=`lightbox`&tHeight=`200`&tWidth=`200`&tResizeType=`smart`&tBox=`0`
&gWidth=`800`&gHeight=`600`&gResizeType=`proportional`&tPaging=`1`&tPagingOnPage=`8`
&tPagingCols=`4`!]

Пример1. Пагинация без кнопок навигации

Код вызова сниппета:
[!PSSGallery?type=`lightbox`&tHeight=`200`&tWidth=`200`&tResizeType=`smart`&tBox=`0`
&gWidth=`800`&gHeight=`600`&gResizeType=`proportional`&tPaging=`1`&tPagingOnPage=`8`
&tPagingCols=`4`&tPagingFirst=`0`&tPagingNext=`0`&tPagingPrevious=`0`&tPagingLast=`0`!]

5. Доступ к данным галереи через Ajax

Пример1. Получение изображений через Ajax

Для инициализации галереи вызываем сниппет:
[!PSSGallery?type=`lightbox`&tHeight=`200`&tWidth=`200`&tResizeType=`smart`&tBox=`0`
&gWidth=`800`&gHeight=`600`&gResizeType=`proportional`&visible=`0`!]

Пример кода:
               $("#load_images").click(function() {
                    $.post("/assets/snippets/pss_gallery/ajax.index.php?action=images",{docId:"367"},function(response) {
                        $("#loaded_images").empty();
                        var images =  $.parseJSON(response);

                        for(var index in images) {
                           var image = $("<img>");
                           image.attr("src",images[index].url_thumbnail_image);
                           image.attr("class","img-polaroid");

                           image.appendTo("#loaded_images");
                        }
                    });
                });  
           
generic cialis online uk cialis professional uk cialis london drugs viagra uk medical specialists cialis online org uk cheap cialis uk suppliers viagra levitra cialis uk cialis on prescription uk generic cialis uk cheap cialis online uk no prescription cialis to buy in uk