Модификация пользовательского интерфейса для jQuery scrollTo: Fade Prev / Next контролирует, когда ничего не осталось для прокрутки

Question

http://cambridgeuplighting.com/portfolio

Я пытаюсь создать функцию, которая будет затемнять элементы управления Next и Prev для функции scrollTo, когда слайд-шоу достигнет любого конца. У меня хорошее начало, но это не работает так, как я хочу. Мне нужны элементы управления, чтобы исчезнуть щелчок ДО того, как он достигнет конца. Прямо сейчас он достигает конца, затем следующий щелчок (который не будет прокручиваться, потому что он в конце) исчезнет элемент управления.

Вот мой код, заранее большое спасибо!

jQuery (см. Приведенную выше ссылку на сайт для HTML и CSS)

 jQuery(function( $ ){
    var itemSize = $('div.portfolioPost').size();
    var containerWidth = itemSize*240;
    //set the width of the container depending on how many post items are there
    $('#postContainer').css({'width': containerWidth })
    //find the relative position of the end point by getting the negative value of the container width minus 961 (extra pixel is to account for IE difference)
    var endPoint = 0-containerWidth+961;
    $('.olderEvents').click(function () {
        $('.newerEvents').fadeTo(350, 1.0)
        var slidePos = $('#postContainer').position();
        if (slidePos.left<=endPoint) {
            $('.olderEvents').fadeTo(350, 0.1)
        } else {
            $('#slideScreen').scrollTo('+=960', 700 );
        }   
    });

    $('.newerEvents').click(function () {
        $('.olderEvents').fadeTo(350, 1.0)
        var slidePos = $('#postContainer').position();
            //relative position of 0 means the slideshow is at the other end
        if (slidePos.left==0) {
            $('.newerEvents').fadeTo(350, 0.1)
        } else {
            $('#slideScreen').scrollTo('-=960', 700 );
        }
    });
});

Answer 1

Я бы сказал, что желаемый функционал не интуитивен для пользователя. Вместо того, чтобы отключить элемент управления, который пользователь уже использует; заставляя их распознавать и инициировать использование другого элемента управления, я бы сказал, что более полезно переназначить этот элемент управления на функцию, интуитивно понятную для пользователя.

В этом случае это позволит пользователю использовать этот элемент управления для перемещения по списку в обратном порядке. Подходите к этому как к попытке предоставить пользователю наиболее полезный инструмент для навигации по вашему контенту.

Подумайте об этом так: как лучше использовать / просматривать / сортировать стопку книг? Выстроить их в ряд и попросить пользователя переместить ряд назад и вперед или расположить книги на ленивом сьюзане и позволить пользователю вращать его?

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

Соответствующий пример этой методологии представлен здесь: http://www.ndoherty.biz/demos/coda-slider/2.0/

Answer 2

@ greg-J: Я согласен с вашими комментариями по поводу эффективности отключения контроля.Вот мой код, который прокручивает обратно к первому элементу, как только вы достигли конца списка.Посмотреть пример @ http://cambridgeuplighting.com/portfolio

jQuery(function( $ ){
        var itemSize = $('div.portfolioPost').size();
    var containerWidth = itemSize*240;
    $('#postContainer').css({'width': containerWidth })
    var endPoint = 0-containerWidth+961;
    $('.olderEvents').click(function () {
        var slidePos = $('#postContainer').position();
        if (slidePos.left<=endPoint) {
            $('#slideScreen').scrollTo('-='+containerWidth, 1000 );
        } else {
            $('#slideScreen').scrollTo('+=480', 500 );
        }   
    });

    $('.newerEvents').click(function () {
        var slidePos = $('#postContainer').position();
        if (slidePos.left==0) {
            $('#slideScreen').scrollTo('+='+containerWidth, 1000);
        } else {
            $('#slideScreen').scrollTo('-=480', 500 );
        }
    });
});