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

I'm trying to have a slideshow with next / previous buttons. I'm using NivoSlider for the cool transitions开发者_如何学JAVA, 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?

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();
    });

$("#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()

<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>