JQuery jCarousel — отключение внешних элементов управления

Я использую JQuery и jcarousel, используя внешние элементы управления навигацией: http://sorgalla.com/projects/jcarousel/examples/static_controls.html

Проблема в том, что кнопки навигации больше не отключаются, как показано здесь:

sorgalla.com/projects/jcarousel/examples/static_simple.html

Есть ли обратный вызов, который я могу использовать, чтобы позволить мне поменять активное изображение кнопки на неактивное изображение?


person iltdev    schedule 04.05.2010    source источник


Ответы (1)


ОБНОВЛЕНО

ДЕМО: http://jsbin.com/ifomi4/5 ИСТОЧНИК: http://jsbin.com/ifomi4/5/edit

В ответ на ваш Последний комментарий:

Весь код, который вам нужен (включая CSS), находится в исходном коде, я прокомментировал его, чтобы вы могли легко его увидеть!

function disableCustomButtons(carousel){

    var prev_class = 'jcarousel-prev-disabled jcarousel-prev-disabled-horizontal';
    if (carousel.first == 1) {
    $('#mycarousel-prev').attr('disabled', 'true').addClass(prev_class);
    } else {
    $('#mycarousel-prev').attr('disabled', 'false').removeClass(prev_class);
    }

    var next_class = 'jcarousel-next-disabled jcarousel-next-disabled-horizontal';
    if (carousel.last == carousel.size()) {
    $('#mycarousel-next').attr('disabled', 'true').addClass(next_class);
    } else {
    $('#mycarousel-next').attr('disabled', 'false').removeClass(next_class);
    }

}

ДЕМО: http://jsbin.com/ifomi4

ИСТОЧНИК: http://jsbin.com/ifomi4/edit

Твик состоит из добавления соответствующего класса к вашей собственной кнопке NEXT и PREV, например:

<a class="jcarousel-prev jcarousel-prev-horizontal" href="#">&nbsp;</a>

<a class="jcarousel-next jcarousel-next-horizontal" href="#">&nbsp;</a>

и, наконец, немного CSS для изображения в центре нашего слайдера

  /* SET THE MARGIN AS YOU NEED */
  .jcarousel-scroll a { margin: 25px 0 }

Это должно работать так, как ожидалось! но просто посмотрите демо, и вы поняли, я прокомментировал основные части!

person Luca Filosofi    schedule 04.05.2010
comment
Странно, я пытался добавить комментарий, но это не сработало. Попробую еще раз... Я понял, как отключить встроенные кнопки навигации и как использовать внешние элементы управления, т.е. элементы управления вне списка. Однако, используя их пример sorgalla.com/projects/jcarousel/examples/static_controls.html Элементы управления просто гиперссылки. Я хочу сохранить навигацию по кнопкам изображения встроенных кнопок, включая их функциональные возможности, т.е. изменить изображение на отключенное (выделено серым цветом) в начале и в конце. Однако мне нужно сделать это вне списка — отсюда и необходимость внешних элементов управления. - person iltdev; 06.05.2010
comment
Просто чтобы быть настоящей болью, есть ли способ иметь кнопку «Далее» и «Предыдущая» вне div mycarousel? Идея состоит в том, что у меня есть блок контента, который разделен на блок заголовка вверху, а затем блок контента внизу. Я хочу, чтобы элементы управления находились в заголовке div (выровнено по правому краю), а карусель — в div контента. В настоящее время элементы управления работают, только если они вложены в div mycarousel. в качестве обходного пути я поместил mycarousel и обернул div за пределы моего собственного контейнера div. Это потребовало небольшой модификации CSS, но конечный результат выглядит именно так, как я этого хочу :) - person iltdev; 07.05.2010