Добавляем jQuery плагин Content Slider в шаблон CMS Cotonti

Анонсирование контента является простым и эффективным способом продвижения самых популярных ресурсов вашего веб-сайта. Кроме того это еще один путь привлечения дополнительного трафика к давно опубликованным архивным статьям. Так называемые Featured Posts или Featured Content широко используются на сайтах любого уровня — от крупных порталов до персональных дневников — для вовлечения аудитории в комментирование и обсуждение тематического материала.

jQuery-плагинов для реализации данной идеи существует предостаточно. У каждого из них имеются как достоинства, так и недостатки. Большинство авторов старается вместить в плагин максимальное количество возможностей. Другие наоборот, забывают об универсальности и пишут плагины, ориентированные на узкие задачи, например, только на вывод графики. Исходя из этого мы сформулировали собственные требования к jQuery-плагину Content Slider.

Выбираем jQuery плагин Content Slider

Итак, нам потребовались:

• универсальность: вывод текстового, графического и смешанного контента
• простота: удобная, читаемая разметка с минимальным количеством контейнеров и стилей
• настраиваемость: настройки по умолчанию в самом плагине, пользовательские настройки — в шаблоне
• корректность в работе: отсутствие багов, глитчей и несовместимостей

После тщательного отбора был отобран плагин loopedSlider 0.5.5 от Nathan Searles. Порадовала аскетичная разметка (немаркированный список, вложенный в два дива), удобство организации стилей (всего 3 (!) обязательных и 6 опциональных) и предельная простота и беспроблемность установки.

Установка Content Slider в шаблон Cotonti

Прежде всего, мы поместили HTML-код слайдера в отдельный подгружаемый TPL-файл. Это редко используемое свойство шаблонов Cotonti на самом деле весьма полезно на практике. Оно позволяет без вреда для общего кода тестировать и внедрять вставки HTML- и JS-кода простым способом:

{FILE "skins/nevada/inc/slider.tpl"}

Вывод плагина Content Slider нам требовался только на главной странице веб-сайта, поэтому мы ограничили загрузку JavaScript-кода и стилей в header.tpl:

<!-- IF {PHP.z} == "index" -->
	<script src="skins/{PHP.skin}/js/loopedslider.min.js" type="text/javascript" charset="utf-8"></script>
	<link href="skins/{PHP.skin}/slider.css" type="text/css" rel="stylesheet" />
<!-- ENDIF -->

Кроме того, в index.tpl мы вывели для для администраторов полезную статистическую информацию вместо анонсов, которые им и так известны:

<!-- IF {PHP.usr.isadmin} -->
	{PLUGIN_POPULARPAGES}
<!-- ELSE -->
	{FILE "skins/nevada/inc/slider.tpl"}
<!-- ENDIF -->

Вот схематичное содержание шаблона slider.tpl:

<div id="loopedSlider">	
	<div class="container">
		<ul class="slides">
			<li>
				<h4>Pellentesque habitant morbi</h4>
				<p>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend. Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</p>
			</li>
			<li>
				<h4>Cras luctus fringilla odio vel hendrerit</h4>
				<p>Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit.</p>
			</li>
		</ul>
	</div>
	<a href="#" class="previous">Назад</a>
	<a href="#" class="next">Вперед</a>

</div>
<script type="text/javascript" charset="utf-8">
	$(function(){
		$('#loopedSlider').loopedSlider({
			autoHeight: 0
		});
	});
</script>

В блоке вызова функции указываем настройки, которые будут переопределять настройки по умолчанию, указанные в самом плагине.

Настройки плагина Content Slider по умолчанию

Class/id обрамляющего контейнера:

container: ".container"

Class/id контейнера, в котором будет происходить смена слайдов:

slides: ".slides"

Class родительского списка (без точки!):

pagination: "pagination"

Смена слайда при клике по нему:

containerClick: true

Если в сайдах будут использоваться собственные ссылки, данное свойство необходимо изменить на false!

Автозапуск слайд-шоу

autoStart: 0

Автостарт будет включен при установке положительного значения, которое будет определять интервал до начала автостарта.

Повторный автозапуск слайд-шоу

restart: 0

Рестарт будет включен при установке положительного значения, которое будет определять интервал до начала автостарта.

Скорость анимации (1000 = 1 секунда)

slidespeed: 300

Скорость фэйдинга (1000 = 1 секунда)

fadespeed: 200

Автоподбор высоты слайда

autoHeight: 0

Включить блок паджинации

addPagination: false

Пример работы данного плагина можно увидеть на главной странице нашего сайта.

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.