Эффект jCarousel для фотоальбома XSLT — различия между версиями
Материал из Umicms
(→Подключение эффекта в фотоальбоме) |
(→Подключение эффекта в фотоальбоме) |
||
| Строка 31: | Строка 31: | ||
</source> | </source> | ||
| − | * Редактируем шаблон '''default. | + | * Редактируем шаблон '''default.xsl''' в папке ''"/xslt/modules/photoalbum"'' |
| − | В | + | В метод 'album' добавляем атрибуты для инициализации эффекта: |
<source lang="html4strict"> | <source lang="html4strict"> | ||
| − | + | <xsl:template match="udata[@module = 'photoalbum'][@method = 'album'][total]"> | |
| − | + | <div id="photoalbum"> | |
| − | + | <div class="descr" umi:element-id="{id}" umi:field-name="descr"> | |
| − | + | <xsl:value-of select="document(concat('upage://',id,'.descr'))/udata/property/value" disable-output-escaping="yes" /> | |
| − | + | </div> | |
| − | + | <ul id="mycarousel" class="jcarousel-skin-tango"> | |
| − | + | <xsl:apply-templates select="items/item" /> | |
| − | + | </ul> | |
| − | + | <div class="clear" /> | |
| − | + | </div> | |
| − | + | <xsl:apply-templates select="total" /> | |
| − | + | </xsl:template> | |
</source> | </source> | ||
| Строка 52: | Строка 52: | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
| − | + | <xsl:template match="udata[@module = 'photoalbum' and @method = 'album']/items/item"> | |
| − | <li> | + | <li> |
| − | < | + | <a href="{@link}" umi:element-id="{@id}" umi:field-name="photo"> |
| − | + | <xsl:call-template name="catalog-thumbnail"> | |
| − | + | <xsl:with-param name="element-id" select="@id" /> | |
| − | + | <xsl:with-param name="field-name">photo</xsl:with-param> | |
| − | + | <xsl:with-param name="empty">&empty-photo;</xsl:with-param> | |
| + | <xsl:with-param name="width">154</xsl:with-param> | ||
| + | <xsl:with-param name="height">110</xsl:with-param> | ||
| + | </xsl:call-template> | ||
</a> | </a> | ||
| − | + | <div class="descr"> | |
| − | + | <h3> | |
| − | + | <a href="{@link}" umi:element-id="{@id}" umi:field-name="h1"> | |
| − | + | <xsl:value-of select=".//property[@name = 'h1']/value" /> | |
| − | + | </a> | |
| − | + | </h3> | |
| − | + | <div umi:element-id="{@id}" umi:field-name="descr"> | |
| − | + | <xsl:value-of select=".//property[@name = 'descr']/value" disable-output-escaping="yes" /> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div class="clear" /> | |
| − | + | </li> | |
| − | + | </xsl:template> | |
| − | |||
| − | </ | ||
| − | </li> | ||
| − | |||
| − | |||
</source> | </source> | ||
| − | |||
| − | |||
== Дополнительно == | == Дополнительно == | ||
Версия 07:51, 3 июня 2013
Подключение эффектов jCarousel
Скачиваем jCarousel с официального сайта:
Разархивируем файлы по соответствующим папкам в системе:
- Все изображения из папки "/skins/tango/" сохраняем в папке "/templates/demodizzy/images/jCarousel/"
- Скрипт jquery.jcarousel.js и jquery-1.9.1.min.js сохраняем в папку "/templates/demodizzy/js/jCarousel/"
- Файл стилей style.css из папки "/skins/tango/" сохраняем в папку "/templates/demodizzy/css/jCarousel/"
В файле style.css меняем направление к изображениям с "images/" на "images/cms/data/jcarousel/"
Подключение эффекта в фотоальбоме
Подключаем js и css в шаблонах. Добавим три строки между тегами <head></head> в основной шаблон, по умолчанию фотоальбом работает с файлом /templates/demodizzy/xslt/layouts/default.xsl:
<script type="text/javascript" src="/templates/demodizzy/js/jCarousel/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/templates/demodizzy/js/jCarousel/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="/templates/demodizzy/css/jCarousel/skin.css" />
Вызываем функцию карусели вставив скрипт так же между тегами <head></head> в основном шаблоне:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
});
});
</script>
- Редактируем шаблон default.xsl в папке "/xslt/modules/photoalbum"
В метод 'album' добавляем атрибуты для инициализации эффекта:
<xsl:template match="udata[@module = 'photoalbum'][@method = 'album'][total]">
<div id="photoalbum">
<div class="descr" umi:element-id="{id}" umi:field-name="descr">
<xsl:value-of select="document(concat('upage://',id,'.descr'))/udata/property/value" disable-output-escaping="yes" />
</div>
<ul id="mycarousel" class="jcarousel-skin-tango">
<xsl:apply-templates select="items/item" />
</ul>
<div class="clear" />
</div>
<xsl:apply-templates select="total" />
</xsl:template>
Помимо этого добавляем для каждого блока с фотографией и описанием значение списка для корректного формирования эффекта прокрутки:
<xsl:template match="udata[@module = 'photoalbum' and @method = 'album']/items/item">
<li>
<a href="{@link}" umi:element-id="{@id}" umi:field-name="photo">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
<xsl:with-param name="width">154</xsl:with-param>
<xsl:with-param name="height">110</xsl:with-param>
</xsl:call-template>
</a>
<div class="descr">
<h3>
<a href="{@link}" umi:element-id="{@id}" umi:field-name="h1">
<xsl:value-of select=".//property[@name = 'h1']/value" />
</a>
</h3>
<div umi:element-id="{@id}" umi:field-name="descr">
<xsl:value-of select=".//property[@name = 'descr']/value" disable-output-escaping="yes" />
</div>
</div>
<div class="clear" />
</li>
</xsl:template>
Дополнительно
Для настроек jCarousel можно использовать описание разработчика. Изменения необходимо вносить в файле jquery.jcarousel.js. Далее идет описание некоторых опций:
| vertical | bool | false | Устанавливает положение карусели вертикальное, по умочанию положение горизонтальное. |
| rtl | bool | false | Устанавливает режим карусели RTL (справа на лево). |
| start | integer | 1 | Номер элемента с которого начнется отображение. |
| offset | integer | 1 | Номер первого доступного элемента в инициализации. |
| size | integer | Количество существующих элементов если размер не передается явно | Общее количество элементов. |
| scroll | integer | 3 | Количество элементов прокручивающихся за раз. |
| visible | integer | null | Количество видимых элементов в карусели. Если не указано, ширина/высота элементов будет вычислена и установленна в зависимости от ширины/высоты карусели. |
| animation | mixed | "fast" | Скорость прокручивания элементов "slow" или "fast" или в млисекундах. Если установленно 0, то прокручивание будет отключено. |
| easing | string | null | Наименование эффекта прокручивания(cv. [jQuery документацию]). |
| auto | integer | 0 | Устанавливает период прокручивания при автоскролле. Если 0 - автоскролл отключен. |
| wrap | string | null | Устанавливает окончание прокрутки либо цикличную прокрутку ( "first", "last", "both", "circular"). |
| buttonNextHTML | string | HTML разметка для кнопки "next". Если установленно null, кнопки "next" не будет. | |
| buttonPrevHTML | string | HTML разметка для кнопки "prev". Если установленно null, кнопки "prev" не будет. | |
| buttonNextEvent | string | "click" | Устанавливает событие при котором будет включаться кнопка "next". |
| buttonPrevEvent | string | "click" | Устанавливает событие при котором будет включаться кнопка "prev". |
| itemFallbackDimension | integer | null | Если по каким-либо причинам плагин jCarouse не может определить размеры элементов, вы можете установить размеры (ширину или высоту в зависимости от ориентации карусели). |
Для изменения размеров jCarousel, изменения вносятся непосредственно в файл стилей style.css, для всего блока используется идентификатор .jcarousel-container, а для внутреннего окна .jcarousel-item
