Эффект jCarousel для фотоальбома XSLT — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(→‎Подключение эффектов jCarousel)
Строка 9: Строка 9:
 
* Файл стилей '''skin.css''' из папки ''"/skins/tango/"'' сохраняем в папку ''"/templates/demodizzy/css/jCarousel/"''
 
* Файл стилей '''skin.css''' из папки ''"/skins/tango/"'' сохраняем в папку ''"/templates/demodizzy/css/jCarousel/"''
  
−
В файле '''skin.css''' меняем направление к изображениям с ''"images/"'' на ''"images/cms/data/jcarousel/"''
+
В файле '''skin.css''' меняем направление к изображениям с ''"url(next-horizontal.png)"'' на ''"url(/templates/demodizzy/images/jCarousel/next-horizontal.png)"''
  
 
== Подключение эффекта в фотоальбоме ==
 
== Подключение эффекта в фотоальбоме ==

Версия 11:39, 12 августа 2013

Актуально для версии 2.9

Подключение эффектов jCarousel

Скачиваем jCarousel с официального сайта:

Разархивируем файлы по соответствующим папкам в системе:

  • Все изображения из папки "/skins/tango/" сохраняем в папке "/templates/demodizzy/images/jCarousel/"
  • Скрипт jquery.jcarousel.js и jquery-1.9.1.min.js сохраняем в папку "/templates/demodizzy/js/jCarousel/"
  • Файл стилей skin.css из папки "/skins/tango/" сохраняем в папку "/templates/demodizzy/css/jCarousel/"

В файле skin.css меняем направление к изображениям с "url(next-horizontal.png)" на "url(/templates/demodizzy/images/jCarousel/next-horizontal.png)"

Подключение эффекта в фотоальбоме

Подключаем 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

Пример

Xslt jCarousel.jpg

Источник — «https://wiki.umisoft.ru/index.php?title=Эффект_jCarousel_для_фотоальбома_XSLT&oldid=6097»