Вход для клиентов и партнеров
в начало сайта
Партнерская программаОнлайн демоСкачатьКарта сайта
 

Регламент
Документация
Часто задаваемые вопросы (FAQ)
Решения типовых вопросов
Форум поддержки
Библиотека разработчика

Посмотрите демо-ролики и убедитесь в том, что "Twilight CMS" очень удобна в управлении, понятна и проста.

Бесплатно скачайте "Twilight.Basic", установите на своем компьютере и изучите систему более детально.

Если вам нужно установить "Twilight CMS" на существующий сайт или разработать новый - обращайтесь в отдел интеграции.

 

Ваше имя
Ваш Email
Вопрос
Twilight.basic
  • Узнайте больше
  • Сравните версии
  • Twilight.selection
  • Узнайте больше
  • Сравните версии
  • Twilight.evolution
  • Узнайте больше
  • Сравните версии
  •  
    Главная // Библиотека разработчика // Справочники // Макроподстановки //

    JQPrettyPhoto


    Назначение

    Макрос, подключающий JQuery плагин prettyPhoto версии 3 для показа изображений в увеличенном виде не уходя со страницы.

    Ключи

    rel Строка, которая будет прописана в атрибут rel тэга A, внутри которого находится IMG, к которому требуется подключить плагин.
    path Путь к папке, в которой лежат дополнительные материалы: CSS, кнопки "закрыть окно" и т.п., необходимые для работы плагина. По умолчанию все материалы лежат в /Bin/Lib/prettyPhoto. Если разработчику нужно использовать другие css и/или графические файлы для оформления окна плагина prettyPhoto, он может скопировать папку prettyPhoto в другое место и указать на её новое местоположение через ключ path. Структуру папок нужно сохранить как есть, либо произвести коррекции путей в css файле (на свой риск).
    cssfile Имя файла с CSS для работы плагина. По умолчанию используется стандартный prettyPhoto.css, но его можно полностью переопределить.

    Комментарии

    Оригинальный плагин и документация по нему могут быть найдены на странице 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: "myimage"]$]]>
        </header>
        <item>
            <![CDATA[
                    $Text[source: "<A HREF="$Attribute:pic1$" title="$XMLize[$Attribute:title$]$" rel="myimage[gallery]">$Thumbnail[source: $Attribute:pic1$; width: 250; height: 250; mode: bound; params: "title=\"$XMLize[$Attribute:title$]$\""; condition: $Attribute:pic1$!=]$</A>"; condition: $Attribute:pic1$!=]$
                   ...
            ]]>

    Комментарии к примеру:

    1. Макрос подключается только один раз на странице, поэтому он вынесен в секцию header.
    2. $Text[]$ нужен только для того, чтобы если в поле pic1 нет пути к картинке (в базе поле пустое) ничего не рисовать.
    3. Вместо картинки "в явном виде" внутри ссылки мы используем макрос $Thumbnail[]$, который позволяет нам сразу сгенерировать уменьшенное изображение нужного формата. При этом ссылка на изображение в <A HREF=...> у нас ведет напрямую на файл. Если нам нужно, предположим, сформировать этот файл определенного размера, например из загруженного фото с цифровика мы хотим показывать большое, но ограниченное экраном изображение, то мы можем и туда вместо пути $Attribute:pic1$ вставить макрос Thumbnail, которые сделает нужное нам преобразование на лету. Только тогда в параметре Thumbnail нужно будет не забыть указать, чтобы он генерировал на выходе только путь к уменьшенной картинке, а не весь тэг IMG в сборе.
    4. Макрос $XMLize[]$ позволяет нам не заботиться о символе " в поле title, которое мы используем тут для подписи к изображению. То есть если в обычной ситуации возможно такое безобразие: <IMG ... title="Фотография директора компании "Рога и подковы" в анфас">, что не является валидной конструкцией за счет кавычек внутри атрибута и в итоге приведет к обрезанию строки, то после XMLizации получим вот такую строку: <IMG ... title="Фотография директора компании &quot;Рога и подковы&quot; в анфас">, что приемлемо.
    5. Согласно синтаксису плагина, если в атрибуте rel у нескольких изображений указать метка[произвольный_идентификатор_галереи], то все изображения с одинаковым идентификатором галереи будут объединены плагином в единую галерею, с возможностью перехода от изображения к изображению прямо в окне плагина.

    Пример с передачей параметров из макроса в плагин

    $JQPrettyPhoto[rel: "mypicture"; animation_speed: fast; show_title: true; allow_resize: true]$

    Макрос распознает и передает плагину не все параметры, которые описаны в документации. Перечень параметров, которые он знает, можно найти в конце файла с макросом.

    « к списку макроподстановок

    версия для печати

     
    © 2003-19 Страта Технологии (создание сайтов, разработка cms), Twilight CMS in english.
    Наш адрес: Москва, пр. Маршала Жукова д.51
    Тел.: (495) 222-6436, E-mail: , карта сайта, условия использования информации о CMS
    Звоните через Skype:  

    Реклама: