Галерея с неравномерным шагом

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

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

Задача

Сделать листалку фотографий, шаг перелистывания которой зависит от ширины каждой конкретной фотографии (т.е. меняется).

Причем, если листать влево, то самая левая из видимых фотографий должна быть видна полностью (выравнивание под левый край), а если вправо, то, соответственно видна самая правая фотография (выравнивание под правый край).

Реализовать листание нажатием на кнопки или колесиком мыши.

Решение

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

Проверено в:

• IE 6-8
• Firefox 4
• Opera 9.5-10
• Safari 4
• Chrome

Что качать?

• библиотеку jquery качаем или подключаем из хранилища.
• jquery.flsgallery.js (2.67 Kb) галерея.
• jquery.mousewheel.min.js (2.6 Kb) для поддержки скроллинга колесиком мыши.
• flsgallery.css (0.66 Kb) стили для галереи.

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

Подключаем библиотеки и таблицу стилей (стили, при необходимости, подправляем в соответствии с дизайном, подробнее см. ниже):

<link rel="stylesheet" href="css/flsgallery.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> <!-- если нужна мышь -->
<script type="text/javascript" src="js/jquery.flsgallery.js"></script>

Основа галереи — список, обернутый в div с id="flsGallery". Отдельные li станут слайдами. Еще два каких-нибудь элемента станут кнопками управления. Пока просто пропишем им id:

<div id="btnPrev"></div>
<div id="flsGallery">
	<ul>
		<li><a href="#"><img src="images/pic200x150.jpg" width="200" height="150" alt=""/></a></li>
		<li><a href="#"><img src="images/pic150x200.jpg" width="150" height="200" alt=""/></a></li>
	</ul>
</div>
<div id="btnNext"></div>

В боевых условиях, для удобства позиционирования, возможно все это дело придется обернуть в div, но в данном примере это не понадобится.

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

<script type="text/javascript">
jQuery(function(){
	jQuery("#flsGallery").flsGallery();
});
</script>

Вот собственно и все.

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

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

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

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

Назначаем кнопки управления и задаем скорость листания:

<script type="text/javascript">
jQuery(function(){
	jQuery("#flsGallery").flsGallery(
		btnNext: ".next",
		btnPrev: ".prev",
		speed: 500
	);
});
</script>

Настройка CSS

Правила, не снабженные комментариями, менять не рекомендуется. Исключение — правила для кнопок управления.

/* видимая область галереи */
#flsGallery {
	overflow: hidden;
 	width: 800px;		/* задаем ширину видимой области */
	height: 150px;		/* ...и высоту */
	position: relative;
	float: left;		/* позиционирую флоатом, но это не обязательно */
}
/* отдельный слайд */
#flsGallery li{
	list-style: none;
	float: left;
	height: 150px;		/* обрезаем по высоте, чтобы было красиво (тоже не обязательно) */
	overflow: hidden;
}
.flsGalleryInner {
	position: absolute;
	top: 0;
	left: 0;
}
/* стили для кнопок управления (настраиваем на свой вкус - тут никаких обязательных правил нет)*/
#btnPrev,
#btnNext {
	width: 30px;
	height: 50px;
	background: url(../images/arrows.png) no-repeat;
	cursor: pointer;
	float: left;
	margin: 50px 10px 0 0;
}
#btnNext {
	background-position: -30px 0;
	margin: 50px 0 0 10px;
}
/* стили для неактивных кнопок управления*/
#btnPrev.disabled{
	background-position: 0 -50px;
	cursor: default;
}
#btnNext.disabled{
	background-position: -30px -50px;
	cursor: default;
}

Вывод

Получилась несложная и достаточно функциональная галерея, которая умеет:

• прокручиваться ровно на ширину, нужную чтобы полностью показать следующий/предыдущий слайд;
• управляется кнопками (HTML-элементами) или колесиком мыши;
• автоматически присваивает/убирает класс disabled для кнопок управления, когда прокрутка в соответствующую сторону невозможна (дошли до конца либо изначально фотографий меньше, чем ширина галереи).

Что не умеет:

• реализовывать циклическую прокрутку;
• обеспечить вертикальную ориентацию.