Просмотр исходного текста страницы Эффект jCarousel для фотоальбома XSLT

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

== Подключение эффектов jCarousel ==
Официальный сайт виджета: http://sorgalla.com/projects/jcarousel/

Скачиваем архив [[Медиа:jsor-jcarousel-0.2.9-0-g8e3df57.zip|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''':

<source lang="html4strict">	
<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" />
</source>

'''ВАЖНО:''' Так как в системе уже есть подключение jQuery, то возможно из за подключения нами версии 1.9.1 перестанет работать панель редактировани. Для решения данной проблемы удалите ранее добавленную строку:
<script type="text/javascript" src="/templates/demodizzy/js/jCarousel/jquery-1.9.1.min.js"></script>

Вызываем функцию карусели вставив скрипт так же между тегами <head></head> в основном шаблоне:

<source lang="html4strict">
<script type="text/javascript">
jQuery(document).ready(function() {
      jQuery('#mycarousel').jcarousel({
      });
  });
</script>
</source>

* Редактируем шаблон '''default.xsl''' в папке ''"/xslt/modules/photoalbum"''
В метод 'album' добавляем атрибуты для инициализации эффекта:

<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 lang="html4strict">
<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>
</source>

== Дополнительно ==

Для настроек jCarousel можно использовать описание разработчика. Изменения необходимо вносить в файле '''jquery.jcarousel.js'''.
Далее идет описание некоторых опций:

<table border="line" width="100%">
<tr>
<td> vertical </td><td> bool </td><td> false </td><td> Устанавливает положение карусели вертикальное, по умочанию положение горизонтальное. </td>
</tr>
<tr>
<td> rtl </td><td> bool </td><td> false </td><td> Устанавливает режим карусели RTL (справа на лево). </td>
</tr>
<tr>
<td> start </td><td> integer </td><td> 1 </td><td> Номер элемента с которого начнется отображение. </td>
</tr>
<tr>
<td> offset </td><td> integer </td><td> 1 </td><td> Номер первого доступного элемента в инициализации. </td>
</tr>
<tr>
<td> size </td><td> integer </td><td> Количество существующих
элементов если размер не передается явно </td><td> Общее количество элементов. </td>
</tr>
<tr>
<td> scroll </td><td> integer </td><td> 3 </td><td> Количество элементов прокручивающихся за раз. </td>
</tr>
<tr>
<td> visible </td><td> integer </td><td> null </td><td> Количество видимых элементов в карусели. Если не указано, ширина/высота элементов будет вычислена и установленна в зависимости от ширины/высоты карусели. </td>
</tr>
<tr>
<td> animation </td><td> mixed </td><td> "fast" </td><td> Скорость прокручивания элементов "slow" или "fast" или в млисекундах. Если установленно 0, то прокручивание будет отключено. </td>
</tr>
<tr>
<td> easing </td><td> string </td><td> null </td><td> Наименование эффекта прокручивания(cv. [[http://api.jquery.com/animate/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DEffects%2Fanimate%26redirect%3Dno jQuery документацию]]). </td>
</tr>
<tr>
<td> auto </td><td> integer </td><td> 0 </td><td> Устанавливает период прокручивания при автоскролле. Если 0 - автоскролл отключен. </td>
</tr>
<tr>
<td> wrap </td><td> string </td><td> null </td><td> Устанавливает окончание прокрутки либо цикличную прокрутку ( "first", "last", "both", "circular"). </td>
</tr>
<tr>
<td> buttonNextHTML </td><td> string </td><td></td><td> HTML разметка для кнопки "next". Если установленно null, кнопки "next" не будет. </td>
</tr>
<tr>
<td> buttonPrevHTML </td><td> string </td><td></td><td> HTML разметка для кнопки "prev". Если установленно null, кнопки "prev" не будет. </td>
</tr>
<tr>
<td> buttonNextEvent </td><td> string </td><td> "click" </td><td> Устанавливает событие при котором будет включаться кнопка "next". </td>
</tr>
<tr>
<td> buttonPrevEvent </td><td> string </td><td> "click" </td><td> Устанавливает событие при котором будет включаться кнопка "prev". </td>
</tr>
<tr>
<td> itemFallbackDimension </td><td> integer </td><td> null </td><td> Если по каким-либо причинам плагин jCarouse не может определить размеры элементов, вы можете установить размеры (ширину или высоту в зависимости от ориентации карусели). </td>
</tr>
</table>

Для изменения размеров jCarousel, изменения вносятся непосредственно в файл стилей '''style.css''', для всего блока используется идентификатор '''.jcarousel-container''', а для внутреннего окна '''.jcarousel-item'''

== Пример ==

[[Файл:xslt_jCarousel.jpg]]


[[Категория:Верстка в XSLT]][[Категория:Модуль Фотогалереи]]