JQuery Nivo Slider sets the delay time for each slide

Question

We use a special system that allows our users to set the delay between slides and whether the image contains a link. We used mootools for the slide show, but we want to update it to nivoSlider.

A php script exports the following data according to our old system requirements

var data = { '0225201274127_1.jpg': {delay:4000}, '0225201274417_4.jpg': {delay:3000}, '0225201274624_9.jpg': {delay:5000}, '0225201274607_8.jpg': {delay:3000}, '0225201274456_6.jpg': {delay:6000}, '0225201274521_7.jpg': {delay:7000}, '0225201274435_5.jpg': {delay:3000}, '0225201274338_2.jpg': {delay:2000}, '0225201274647_10.jpg': {delay:1000}, '0225201274359_3.jpg': {delay:6000}, '0225201274707_11.jpg': {delay:4000} }; 

I'm just looking for a way to set delays above individual images in a slide show.

If necessary, I can reconfigure the output. We tried different methods all day without success.

Answer 1

I use an array with 'afterLoad' and it works well.

  var delays = [4000,3000,5000,3000]; //your delay array function pageLoad() { $(function () { $('#slider').nivoSlider({ pauseTime: 50000, directionNav: true, afterChange: function () { setDelay() }, afterLoad: function () { setDelay() }, controlNav: true, pauseOnHover: false }); }); } function setDelay() { var currentSlide = $('#slider').data("nivo:vars").currentSlide; setTimeout(function () { $('#slider').find('a.nivo-nextNav').click() }, delays[currentSlide]); } 

hope this helps. The rest of your html is the standard nivo layout