Забавная галерея Tiny Circleslider

Tiny Circleslider — интересный пример небанальной галерейки.

Основные особенности:

• Поддерживает iPhone, iPad и Android.
• Прокрутка может выполнятся выполняется или перетаскиванием ползунка или щелчком на нужном элементе.
• Можно задать автоматическую прокрутку с заданным интервалом времени.
• Если пользователь отпустил ползунок между точками, можно включить автоматическое перемещение на ближайшую точку.
• Есть возможность скрывать точечки, когда перетаскивание закончено.
• Можно регулировать радиус слайдера.
• Может генерировать функцию обратного вызова после каждой смены слайда.
• Легко настраивается.
• Легкая — всего 130 строк кода. Размер минимизированной версии всего 4 kb.

Демо-пример.

Проверено в:

• IE 6-8
• Firefox 3+
• Opera 9.5+
• Safari
• Chrome

Что качать?

• библиотеку jquery качаем или подключаем из хранилища.
• jquery.tinycircleslider.min.js (4.7 Kb) — минимизированная версия или полная jquery.tinycircleslider.min.js (6.55 Kb), для любителей покопаться в коде.
• images.rar (17.34 Kb) картинки для плагина.

Быстрый старт

Подключаем библиотеки:

<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.tinycircleslider.min.js"></script>

Основа галереи — список. Отдельные li станут слайдами. Добавляем несколько вспомогательных div и обрамляем все это дело в контейнер. Должен получиться вот такой код:

	<div id="rotatescroll">
		<div class="viewport">
			<ul class="overview">
				<li><a href="#"><img src="images/pic1.jpg" /></a></li>
				<li><a href="#"><img src="images/pic2.jpg" /></a></li>
				<li><a href="#"><img src="images/pic3.jpg" /></a></li>
				<li><a href="#"><img src="images/pic4.jpg" /></a></li>
				<li><a href="#"><img src="images/pic5.jpg" /></a></li>															
			</ul>
		</div>
		
		<div class="dot"></div>
		<div class="overlay"></div>
		<div class="thumb"></div>
	</div>

Прописываем стили:

#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .overlay {background:url(../images/bg-rotatescroll.png) no-repeat 0 0;  position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:url(../images/bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200;  height: 100px; }
#rotatescroll .dot { background:url(../images/bg-dot.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span { display: none; }

Если ты все еще вынужден поддерживать IE6 (сочувствую), то добавь специально для него еще и такие стили (или избавься от бага с полупрозрачностью любым известным тебе способом):

#rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-rotatescroll.png", sizingmethod='scale'); }
#rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-thumb.png", sizingmethod='scale'); }

Стили, конечно, нужно подкорректировать под свой размер слайдов и элементов управления. И не забудь положить в нужное место картинки (или нарисовать свои).

Инициализируем галерею:

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#rotatescroll').tinycircleslider();
});
</script>

Все! Простейшая галерея готова к работе.

А теперь подробнее

Как всегда, основа настройки — параметры вызова функции tinycircleslider().

Параметры tinycircleslider()

Примеры инициализации c параметрами

Включаем автоперемотку слайдов и показ точек:

jQuery('#rotatescroll').tinycircleslider({
	interval: true,
	snaptodots: true
});

После каждой смены слайда плагин умеет вызывать пользовательскую функцию, в которой доступны текущий li и его индекс:

jQuery('#rotatescroll').tinycircleslider({
	callback: function(element, index){
		/* функция */
	}
});

Правильный выбор радиуса

Радиус твоего circleslider будет равен расстоянию между центром круга и центральной линией внешней окружности (см. рисунок ниже).

Вывод

Имеем очень симпатичную и оригинальную галерейку. Пользуйтесь на здоровье.

Материал:

• jquery plugin :: Tiny Cleslider