Nivo slider, make custom links change the slides on click

Question

We´re currently working on the following site: http://www.temminktrainingcoaching.nl/beta

There's a lavalamp menu, with a Nivo Slider, which we'd like to link together. As you can see, there are 5 slides, and 5 links in the menu. We'd like them to correspond. This is the piece of code in nivoslider which changes the slides:

$('.nivo-controlNav a', slider).live('click', function(){
            if(vars.running) return false;
            if($(this).hasClass('active')) return false;
            clearInterval(timer);
            timer = '';
            slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
            vars.currentSlide = $(this).attr('rel') - 1;
            nivoRun(slider, kids, settings, 'control');
        });

I'm pretty new to jquery, I couldn't figure out how to create custom links. I've tried to change '.nivo.controlNav a' to the appropiate links, but that doesn't seem to do the trick.

Thanks for any help!

Regards, Kasper

Purchase

When you say correspond, what do you mean? Want to load a certain page when you select a slide, or load a slide when you click on the menu item? – Jasun

The last option. When you click (or in the end hover) on a link, the slider should change to the corresponding image (5 links, 5 slides). – Purchase

I'd really appreciate if you could take a look at this! thank you! – Purchase

Any chance you know where I can get the Nivo slider docs? There is probably a function that you can call on the slider to tell it to jump to a specific slide, but I can't seem to find any documentation of public functions. – Jasun

nivo.dev7studios.com is their site, but I guess you found it already. I'm on my phone now, i'll give it a good look around as soon as I get home (30mins) and post here. They indeed don't seem to have any straightforward documentation. They're encouraging you to get a pro license for 'pro support', whatever that means ;) – Purchase

@SurrealDreams, Checked it out, couldn't really find a clear documentation. temminktrainingcoaching.nl/beta/js/jquery.nivo.slider.js is the source i use. I reduced it by removing all the transition effects i didn't need, but other than that it's pretty much unchanged. If you download the package on the nivoslider site, there are some demos in it. Hope that helps! – Purchase

@surreal Have you had the time to check it out? I appreciate your help! Thanks :) – Purchase

Answer 1

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

Fredi

Does not work for me. Uncaught Typeerror object object object has no method slideto – Richards

Answer 2

You can call methods inside the Nivo slider plugin to effect a 'slideTo' or 'go to slide' without having to modify the plug in code.

1. Set the index of currentSlide to one before the desired slide, then,
2. Trigger a click in the nextNav to advance forward.

Note: This also works as a good solution if you're dynamically updating the nivo slider images. In that case, update the image source and then slideTo the currentSlide. All the slices will be updated by nivo and the new image will be displayed.

Wrap it up as a jQuery function and call it:

 (function($) { 
         // slideTo function for nivo-slider
        $.slideTo = function(idx) {
            $('#slider').data('nivo:vars').currentSlide = idx - 1;
            $("#slider a.nivo-nextNav").trigger('click'); 
        }
  })(jQuery);
  // call the function
  // example:
  $.slideTo(3);

Paving

Works great, except when the slides are in the middle of a transition. Any thoughts on fixing it so it can detect that the slides are transitioning? – Baeyer

Answer 3

Nivo's own navigation controls operate from the following code:

<div class="nivo-controlNav">
  <a class="nivo-control" rel="0">1</a>
  <a class="nivo-control" rel="1">2</a>
  <a class="nivo-control" rel="2">3</a>
  <a class="nivo-control" rel="3">4</a>
</div>

We would be able to duplicate this to create our own custom navigation if it wasn't for the first line of the controlling function:

$('.nivo-controlNav a', slider).live('click', function(){

The second parameter of the jQuery identifier (slider) means that the controls are only acknowledged from within the slider element, typically anything within the #slider div. If you use the un-minified jquery.nivo-slider.js and remove the slider parameter then you can use the above code in your own navigation. The modified function should look like this:

        $('.nivo-controlNav a').live('click', function(){
            if(vars.running) return false;
            if($(this).hasClass('active')) return false;
            clearInterval(timer);
            timer = '';
            slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
            vars.currentSlide = $(this).attr('rel') - 1;
            nivoRun(slider, kids, settings, 'control');
        });

That is, any 'a' element within a '.nivo-contolNav' element will control the slider. use the "rel" attributes to specify the slider page you desire.

Also, the controlNav setting must be set to true, but this is the default setting.

Petersen

Answer 4

You can trigger a click on the relevant control link that Nivo generates, for instance, to change the slider to the 4th link:

$('.nivo-control[rel="3"]').trigger("click");

Furr