Как создать особый эффект перехода для ползунка nivo на основе стрелок «предыдущая» или «следующая»?

Я пытаюсь вызвать определенный эффект перехода, основанный на стрелке, на которую нажимает пользователь.

поэтому я увидел key">это сообщение, и я безуспешно пытаюсь адаптировать его по-своему.

Итак, у меня есть эти изображения:

<div id="slider" class="nivoSlider">
    <?php   foreach($SlideShowImages as $SlideShowImage){
    ?>
        <img src="<?php echo base_url($SlideShowImage['image_url']);?>" data-thumb="" alt="Image SlideShow"/>
    <?php
    }
    ?>
    </div>

и мне бы хотелось, чтобы пользователь нажал на эту стрелку:

<a class="nivo-prevNav">Prev</a>

у него есть специфический эффект, поэтому я попробовал это:

$('.nivo-prevNav').on('click', function(){
       $('#slider img').attr("data-transition","slideInLeft");
  });

безуспешно ...

РЕДАКТИРОВАТЬ: благодаря roine я заставил эту функцию работать, но у меня есть последний вопрос: во-первых, когда я нажимаю на стрелку, кажется, что эффект перехода изменяется только во второй раз, когда я нажимаю на нее. Насколько я понимаю, при первом нажатии на стрелку я применяю изменения к изображению, а затем, во второй раз, эти изменения учитываются процессом слайдера nivo.

Итак, я увидел эти строки в настройке слайдера nivo:

beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition

Может быть, я должен вызвать функцию здесь?

Спасибо


javascript slider slideshow nivo-slider
person Miles M.    schedule 03.08.2012    source источник
comment
Атрибут data-* следует использовать следующим образом: $('#slider img').dataset.transition = slideInLeft   -  person Jonathan de M.    schedule 03.08.2012
comment
erf по-прежнему не действует, но я думаю, что моя проблема возникает из-за $('.nivo-prevNav').on('click', function(){, так как я не получаю никаких предупреждений при размещении предупреждения внутри функции. Это выглядит Хорошо для тебя ?   -  person Miles M.    schedule 03.08.2012
comment
какую версию jquery вы используете? существует с версии 1.7, попробуйте использовать live вместо on.$('.nivo-prevNav').live('click', function(){ $('#slider img').attr(data-transition,slideInLeft); });   -  person Jonathan de M.    schedule 03.08.2012
comment
отлично, работает! Но все же, не могли бы вы взглянуть на мою правку, пожалуйста? Спасибо ;)   -  person Miles M.    schedule 03.08.2012

Ответы (1)


arrow_upward
2
arrow_downward

Я нашел решение здесь:

// Assigning a Specific Effect to the Prev/Next Buttons
    $('.nivo-prevNav').live('mouseover', function(){
         $('#slider img').attr("data-transition","sliceUpDown");
    });

    $('.nivo-nextNav').live('mouseover', function(){
         $('#slider img').attr("data-transition","sliceUpDownLeft");
    });
person Miles M.    schedule 04.08.2012