External Controls (Next / Prev) for Nivo Slider (raphaeljs)?

Question

I'm trying to have a slideshow with next / previous buttons. I'm using NivoSlider for the cool transitions, and raphaelJS for animated next / previous buttons. My only issue is that there is no built in way to give an element to Nivoslider that represents the next button. Because my element is a triangle that animates I need someway to let NivoSlider know that I want $(triangle.node) to represent next & previous. The library is private (I think that's how you express that) so it can't see the triangle.node global. Any ideas?

Answer 1

Add this code before you initialize Nivo Slider and replace the parameters with your triangleNodePrev / Next. This has the advantage of disabling the default action on your links so that if you use href="#" the browser doesn't scroll back to the top of the page.

$('#previousButton, #nextButton').on('click', function (e) {

         // Prevent the link from being followed
         e.preventDefault();

         // Initialize variables 
         var buttonId = this.id,
          buttonClass = ('previousButton' == buttonId) ? '.nivo-prevNav' : '.nivo-nextNav';

         // Trigger the slider button
         $('.nivo-directionNav').find(buttonClass).click();
    });

Answer 2

$("#triangleNodePrev").click(function(){$(".nivo-directionNav .nivo-prevNav").click()})
$("#triangleNodeNext").click(function(){$(".nivo-directionNav .nivo-nextNav").click()})

That should do it but in any case the commands you need are

$(".nivo-directionNav .nivo-prevNav").click()

and

$(".nivo-directionNav .nivo-nextNav").click()

Answer 3

<script type='text/javascript'>
$(document).ready(function() {
    jQuery("#previousButton').click(function (e) {
         e.preventDefault();
         jQuery(".nivo-directionNav .nivo-prevNav").click();
    });
    jQuery("#nextButton').click(function (e) {
         e.preventDefault();
         jQuery(".nivo-directionNav .nivo-nextNav").click();
    });
});
</script>