Xiper

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

Автор: Александр Головко Дата публикации:

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

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

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

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

Проверено в:

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

Что качать?

  • библиотеку jquery качаем или подключаем из хранилища.
  • (4.7 Kb) — минимизированная версия или полная (6.55 Kb), для любителей покопаться в коде.
  • (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()

Название параметра Описание возможные значения
snaptodots Если true, показывает точки, когда пользователь начинает двигать ползунок. В этом случае если оставить ползунок между точками, он автоматически переедет на ближайшую. false
hidedots Скрывает точки, когда пользователь отпустил ползунок. true
interval Автоматический переход к следующему элементу галереи через заданный интервал времени. false
intervaltime Время интервала в миллисекундах. 3500
lightbox Установи в true, если к галерее подключается lightbox, иначе оставь false. false
radius Используется, чтобы определять размер circleslider. 140
callback Функция, которая выполняется после каждого перемещения. null

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

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

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

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

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

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

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

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

Вывод

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

Материал:

  • jquery plugin :: Tiny Cleslider