Макрос, подключающий JQuery плагин prettyPhoto версии 3 для показа изображений в увеличенном виде не уходя со страницы.
Оригинальный плагин и документация по нему могут быть найдены на странице http://www.no-margin-for-errors.com/projects/prettyPhoto/.
Для подключения данного плагина на сайте не требуется отдельно подключать библиотеку JQuery, все необходимые действия система управления выполнит самостоятельно.
Логика работы плагина: обычно на страницах сайта при отображении разных галерей, списков товаров и так далее на уменьшенном изображении (thumbnail) ставится ссылка, ведущая либо на отдельную страницу с большим изображением, либо открывающая его в новом окне. Плагин позволяет открыть увеличенную картинку прямо в странице, в небольшом псевдоокне. Как это работает можно посмотреть, например, на сайте www.weddingrush.ru, достаточно зайти в любое объявление и нажать на картинку.
Чтобы научить систему открывать изображения таким образом достаточно:
1. Использовать на страницах сайта конструкцию вида <A HREF="путь к большой картинке" rel="bigImage"><IMG SRC="маленькая картинка"></A>
2. Подключить макрос один раз на странице, передав ему в ключе rel значение bigImage. Это значение показано только для примера, в имени класса можно использовать любое значение.
Макрос позволяет при необходимости создавать свое оформление для макроса (свои CSS и изображения, например для кнопок "закрыть", "увеличить картинку" и т.д.), а также задавать разные параметры самому макросу: скорость разворачивания, непрозрачность фона, отступы, параметры увеличения картинки и т.д. Макрос просто получает значения некоторых ключей (отмечены в списке как "параметры плагина" и передает их в плагин. Как и что они делают - смотрите в документации по плагину, хотя из названий параметров в большинстве случаев все должно быть понятно.
Параметры
Все параметры, которые макрос умеет передавать в плагин, перечислены в конце файла с макросом (/cgi-bin/Macro/JQPrettyPhoto.pl). Более подробно о них можно узнать из документации по плагину.
ВНИМАНИЕ1. В версии 2 плагина его автор мспользовал другие названия свойств, которые были им изменены в версии 3. Например, во второй версии было: animationSpeed, showTitle. В третьей версии эти свойства стали называться animation_speed, show_title. Некоторые свойства, такие как opacity, были исключены. Соответственно, при установке Twilight CMS версии 4.19+ все параметры вызовов в старом формате потребуется переделать.
2. По умолчанию мы присваиваем параметру theme значение facebook, поскольку это единственная тема, где кнопка "Закрыть" не снабжена текстом на английском языке, а значит эта тема легко подойдет сайту на любом языке. В документации по плагину сказано, что по умолчанию подключена другая схема, которую разработчик может подключить обратно при желании. Все темы находятся в папке /Bin/Lib/prettyPhoto/images/prettyPhoto.
show_title
Примитивный пример
$JQPrettyPhoto[rel: "mypicture"]$
<A HREF="/Sites/twl_ru/Images/biglogo.jpg" rel="mypicture"><IMG SRC="/Sites/twl_ru/Images/smalllogo.jpg"></A>
Пример использования макроса на сайте www.weddingrush.ru
<newsdesign id="news_details_text">
<header>
<![CDATA[$JQPrettyPhoto[rel: "img"]$]]>
</header>
<item>
<![CDATA[
$Text[source: "<A HREF="$Attribute:pic1$" title="$XMLize[$Attribute:title$]$" rel="img[gallery]">$Thumbnail[source: $Attribute:pic1$; width: 250; height: 250; mode: bound; params: "title=\"$XMLize[$Attribute:title$]$\""; condition: $Attribute:pic1$!=]$</A>"; condition: $Attribute:pic1$!=]$
...
]]>
Комментарии к примеру:
- Макрос подключается только один раз на странице, поэтому он вынесен в секцию header.
- $Text[]$ нужен только для того, чтобы если в поле pic1 нет пути к картинке (в базе поле пустое) ничего не рисовать.
- Вместо картинки "в явном виде" внутри ссылки мы используем макрос $Thumbnail[]$, который позволяет нам сразу сгенерировать уменьшенное изображение нужного формата. При этом ссылка на изображение в <A HREF=...> у нас ведет напрямую на файл. Если нам нужно, предположим, сформировать этот файл определенного размера, например из загруженного фото с цифровика мы хотим показывать большое, но ограниченное экраном изображение, то мы можем и туда вместо пути $Attribute:pic1$ вставить макрос Thumbnail, которые сделает нужное нам преобразование на лету. Только тогда в параметре Thumbnail нужно будет не забыть указать, чтобы он генерировал на выходе только путь к уменьшенной картинке, а не весь тэг IMG в сборе.
- Макрос $XMLize[]$ позволяет нам не заботиться о символе " в поле title, которое мы используем тут для подписи к изображению. То есть если в обычной ситуации возможно такое безобразие: <IMG ... title="Фотография директора компании "Рога и подковы" в анфас">, что не является валидной конструкцией за счет кавычек внутри атрибута и в итоге приведет к обрезанию строки, то после XMLizации получим вот такую строку: <IMG ... title="Фотография директора компании "Рога и подковы" в анфас">, что приемлемо.
- Согласно синтаксису плагина, если в атрибуте rel у нескольких изображений указать метка[произвольный_идентификатор_галереи], то все изображения с одинаковым идентификатором галереи будут объединены плагином в единую галерею, с возможностью перехода от изображения к изображению прямо в окне плагина.
Пример с передачей параметров из макроса в плагин
$JQPrettyPhoto[rel: "mypicture"; animation_speed: fast; show_title: true; allow_resize: true]$
Макрос распознает и передает плагину не все параметры, которые описаны в документации. Перечень параметров, которые он знает, можно найти в конце файла с макросом.
