Слайдер для сайта на справочниках для UMI.CMS

Для реализации слайдера в качестве примера буду использовать библиотеку jQuery Cycle Plugin. Порядок действий будет такой.

1. Заведём для страницы (например для главной страницы сайта) специальный блок и поле для реализации слайдера. Т.к. для главной страницы я использую отдельный тип данных, этот блок у меня больше нигде фигурировать не будет. Переходим в редактирование типа данных страницы и добавляем там группу и в ней поле для слайдера.

2. Как видите, для слайдера я указал справочник и задал тип "Выпадающий список со множественным выбором". Теперь отредактируем справочник для нашей цели. Для этого при редактировании справочника добавим ему новую группу и создадим нужные поля.

3. Теперь при заполнении справочника мы можем указать картинку и при желании ссылку по которой будет переход при клике на картинку (а-ля баннер).

И т.о. заполняем справочник, создавая и заполняя его необходимым количеством будующих слайдов.

4. После того, как мы создали нужные слайды, переходим в редактирование страницы, для которой мы создали блок для слайдера (в моем случае это главная страница сайта). И там выбираем какие из слайдов включам в показ слайдера. Т.к. у нас справочник со множественным выбором, мы можем указать выборочно нужные слайды, но завести при этом больше слайдов, а при необходимости просто отредактировав страницу отредактировать слайдер по новому указав другие слайды.

5. А теперь напишем все необходимые шаблоны дабы прикрутить подготовленный к публикации слайдер в дизайн нашего сайта.

Вызов слайдера в шаблоне будет вот таким:

<script type="text/javascript" src="/js/jquery.cycle.all.min.js" />
<div id="slider">
    <xsl:apply-templates select="document('upage://1')/udata/page//property[@name = 'illustration']/value" />
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').cycle({ 
            fx:      'fade', 
	    speed:    1000, 
	    timeout:  5000
	});
    });
</script>

Где 1 - это id страницы, а illustration - название поля (у вас они могут быть другие). И не забывайте, что библиотека jQuery должна быть подключена выше чем подключение jquery.cycle.all.min.js.

Ну и теперь напишем оставшиеся шаблоны которые будут выводить и отображать картинки с сылками.

<xsl:template match="property[@name = 'illustration']/value">

    <xsl:apply-templates select="item" mode="slide_object" />

</xsl:template>
	
<xsl:template match="item" mode="slide_object">
    <xsl:apply-templates 
	select="document(concat('uobject://', @id))/udata" 
	mode="slide_object" />
</xsl:template>
	
<xsl:template match="udata" mode="slide_object">
    <a href="{.//property[@name = 'link_slide']/value/page/@link}">
	<img src="{.//property[@name = 'image_slide']/value}" />
    </a>
</xsl:template>

Ну и напоследок ниже вы можете увидеть что в итоге получилось. Естественно это только пример, и ваша конечная реализация может отличаться в зависисмоти от того, какой библиотекой для реализации слайдера вы будете пользоваться.

25.07.2013

Вернуться на предыдущую страницу | Вернуться в раздел