External links to slides NivoSlider

  • 03/04/2012 - 17:03
  • Blog

Some days ago a customer asked me whether I could make external links to specific slides in a Nivo Slider.

To solve this I first checked the forum of Nivo Slider, unfortunately it seemed as though this was not possible by default configuration:

Unfortunately, it's not currently possible to link to a specific slide
within the slideshow.

http://support.dev7studios.com/discussions/nivo-slider/398-linking-to-specific-slide

or there were no reacties

http://support.dev7studios.com/discussions/nivo-gallery-jquery-plugin/37-external-link-to-specific-slide

or the reactions did not work

http://support.dev7studios.com/discussions/nivo-slider/31-link-directly-to-a-specific-slide

after some searching I came across a page that provided me with renewed hope, an answer to this question on stackoverflow was the following:

I was able to solve this by using a fork of the code available on github:

https://github.com/gilbitron/Nivo-Slider/pull/176

It has a new function slideTo() that seems to work well for this.

Call this code to jump to slide 2

$('#slider').data('nivoslider').slideTo(1);

I downloaded the code with the slideTo function (direct link) and although the code had some errors (it does not correct empty titles at line 103) it seemed to work.

The javascript I used with the slider was the following: (div ext_nivo_nav contained the different links).
(This code is for stopping the nivoslider when the link is hovered and starting it when the div containing the links is not hovered anymore). To do this on click you can just to the …slideTo(0) on click.

Good luck!

$(".ext_nivo_nav").mouseleave(function(){
    $("div#slidernivo.nivoSlider").data('nivoslider').start();
});

$('.link_to_first').mouseover(function(){
    $("div#slidernivo.nivoSlider").data('nivoslider').slideTo(0);
    $("div#slidernivo.nivoSlider").data('nivoslider').stop();

    $('.link_to_first').addClass('active');

    if(!$(".link_to_second").hasClass('active')) {
        $('.link_to_second').removeClass('active');
    }
});