Инициирование события jQuery, когда видны 3 определенных элемента. - PullRequest
1 голос
/ 10 ноября 2009

Надеюсь, это имеет смысл.

Я тестирую новую версию моего личного сайта на http://joshuacody.net/jc3/

Я хочу показать свои работы в интерактивном стиле, используя jQuery.

Вы можете видеть, что каждое изображение не соответствует, но у него есть ротатор. И вы можете вращать каждое изображение, чтобы выровнять все три вверх. Когда все три будут выстроены в линию, я хотел бы добавить в div, объясняющий, что это за проект.

Я использую плагин для поворота моих изображений (http://www.malsup.com/jquery/cycle/),, если это поможет.

Я довольно новичок в jQuery, и мне просто не хватает того, как это сделать теоретически. Есть идеи?

1 Ответ

1 голос
/ 10 ноября 2009

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

Вам нужно будет использовать события или обратные вызовы, как , описанное в демоверсии. Параметр after: - это все, что вам действительно нужно. Сначала я бы заполнил ваши атрибуты alt описаниями, которые идентичны для всех подходящих изображений слотов. Тогда функция after будет выглядеть примерно так:

$('#slot_1').cycle({
    fx: 'scrollVert',
    next: '.scroll_up_1',
    prev: '.scroll_down_1',
    after: onAfter,
    timeout: 0
}); // Duplicate the after param on all 3 slots.
function onAfter(){
    var alt =  $('#slot_1 img:visible').attr('alt');
    if (alt == $('#slot_2 img:visible').attr('alt') &&
        alt == $('#slot_3 img:visible').attr('alt') ) {
        switch (alt) {
        case 'Critical Reason?':
            $('#linkToWork1').click(); //a hidden link?
        break;
        case 'CFCC Labs':
            document.location = 'http://url/to/work/2';
        break;
        case 'Tailgate':
            $('#formActionWork3').submit();
        break;
        default:
        //oops.
        }
    }
}

Обратите внимание, что я добавил три способа, чтобы реально изменить страницу, вы, вероятно, захотите выбрать свой любимый.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...