Плагин jQuery — Elastislide

25.10.2012

Адаптивность в веб дизайне становится важной не только потому, что сохраняет визуальную целостность сайта при просмотре на различных устройствах, но и потому, что она отвечает за полный функционал проекта. Elastislide — плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.

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

Elastislide использует плагин jQuery Touchwipe, который позволяет получать и обрабатывать событие wipe на iPhone, iPad или iPod.

Структура HTML


Разметка карусели состоит из основного контейнера, который выравнивает ширину плавающего контейнера, помещаемого внутрь него. (Если вы разместите карусель в контейнере с фиксированной шириной, она не будет адаптироваться к размеру экрана. Проверяйте ваш шаблон.)

Элемент карусели является неупорядоченным списком ссылок на изображения:

</pre>
<div id="carousel">
<div>
<ul>
<ul>
	<li><a href="#">
 <img src="images/medium/1.jpg" alt="image01" />
 </a></li>
	<li>...</li>
</ul>
</ul>
<ul>...</ul>
</div>
</div>
<pre>

Используйте атрибут ID и запускайте плагин:

$('#carousel').elastislide({
	imageW 	: 180
});

где imageW — ширина миниатюр.

CSS


Плагин Elastislide имеет следующие опции:

speed		: 450,
// скорость анимации

easing		: '',
// эффект перехода

imageW		: 190,
// ширина изображений

margin		: 3,
// поле для изображений справа

border		: 2,
// рамка изображений

minItems	: 1,
// минимальное количество слайдов, которое нужно выводить.
// При изменении размера окна будет выводиться слайдов не менее
// количества, заданного в парметре minItems
// (если значение minItems меньше, чем общее количество слайдов)

current		: 0,
// номер текущего слайда.
// При изменение окна плагин всегда будет
// выводить слайды так, чтобы указанное изображение было видно.

onClick		: function() { return false; }
// Возвратная функция для события click на слайде.
// Пример получения номера слайда, на котором нажали кнопку мыши:
/*
$('#carousel').elastislide({
    onClick  :  function( $item ) {
        alert( 'кнопку мыши нажали на слайде № ' + $item.index() )
    }
});
*/

Также возможно динамически добавлять новый пункт в карусель. Следующий пример показывает, как выполнить дополнение нового пункта:

var $items	= $('</pre>
<ul>
	<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li>
	<li><a href="#"><img src="images/large/2.jpg" alt="image01" /></a></li>
</ul>
<pre>
');
$('#carousel').append($items).elastislide( 'add', $items );




Источник: ruseller.com

Другие темы:

Простая система комментариев для сайта на PHP+AJAX
Что нового в PHP 5.5?
Оффер на "Золотой актив 4.0"
Видеокурс Скринкаст-мастер скидка 15%