Гиркало Вадим - программист фрилансер и разработчик (freelancer, developer) сайтов на TYPO3

Решил посвятить пост не TYPO3, а jQuery и довольно известной карусели - jcarousel.

На днях пришлось решать следующую задачку. Есть jcarousel и у нее порядка 10 страниц. С помощью стрелочек "влево" и "вправо" мы гуляем по ней то туда, то сюда. Зашли на страницу - 7. Потом вдруг переходим на другую страницу сайта, после чего опять возвращаемся к странице с каруселью. И что мы имеем в данной ситуации? А имеем:

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

Второй неприятный момент заключается в том, что нельзя отослать кому-то ссылку показывающую 7-ю страницу карусели, т.к. все страницы имееют один и тот же url.

Чтобы избавиться от этих двух недостатков нам нужно как-то запоминать состояние карусели. Сделать это можно с помощью якорей или иначе - хеш-ссылок. Например, http://www.domain.com/page.html#watch1, http://www.domain.com/page.html#watch7 и т.д.

Первое, что нужно сделать, это менять строку адреса браузера при пролистывании карусели. На выручку приходит параметр jcarousel - itemVisibleInCallback (другие параметры мне не подошли, хотя напрашивались, например itemFirstInCallback), который определяет пользовательскую функцию, далее цитирую мануал: "вызываемую (по завершению анимации) когда элемент находится в зоне видимости поля карусели". В данную функцию передается 4 параметра: экземпляр карусели, ссылка на элемент LI этого объекта, индекс, указывающий позицию элемента в списке и состояние карусели (prev, next, init). Итак, готовый кусочек кода выглядит так:

// carouselStart - номер элемента карусели с которого начинается показ
var carouselStart = 3;
var watchPos = -1;
var anchor = ( jQuery.url.attr('anchor') == null ? '' : jQuery.url.attr('anchor') );
watchPos = anchor.indexOf('watch');
if ( watchPos >= 0 ) {
carouselStart = anchor.substring(watchPos+5);
}
if(jQuery.isFunction(jQuery.fn.jcarousel)) {
jQuery('#mycarousel').jcarousel({
easing: 'easeOutQuart',
animation: 900,
scroll: 3,
wrap: 'last',
start: (carouselStart - 2),
itemVisibleInCallback: function (carousel, liElement, itemIndex, action) {
window.location.hash = "watch"+itemIndex;
}
});
}

Поясню кое-что.
1. #mycarousel - id тега UL, который является контейнером элементов карусели - LI;
2. scroll: 3 - у меня на одной странице карусели отображается 3 её элемента;
3. start: (carouselStart - 2) - номер элемента карусели с которого начинается показ
4. itemVisibleInCallback - определяет функцию которая меняет адресную сроку браузера. Самый ценный параметр, который поступает на вход этой функции - itemIndex. Т.к. у меня на каждой странице карусели отображается по 3 её элемента, то при нажатии на кнопку Next itemIndex принимает следующие значения: 3, 6, 9... и т.д.
Так, мы запоминаем состояние карусели.

Для того, чтобы карусель начала показ с нужного места, используется переменная - carouselStart. Значение этой переменной берется из адресной строки браузера.

Ну вот, собственно и все. Надеюсь кому-то помог и сэкономил время.

P.S. Рабочий вариант карусели можно посмотреть здесь.