Question

I am using a jQuery Slider found here. What I want to modify is to set the slideShowDelay in the HTML like so:

<div class="oneByOne_item" rel="6000">
    <p>Slide one, 6 seconds.</p>
</div>

<div class="oneByOne_item" rel="2000">
    <p>Slide two, 2 seconds.</p>
</div>

Right now, there is only one time for all slides and it’s in the Javascript:

$('#slider').oneByOne({
    className: 'oneByOne1',
    slideShow: true,
    easeType: 'none',
    enableDrag: false,
    showArrow: false,
    showButton: false,
    width: 1280,
    height: 720,
    delay: 0,
    slideShowDelay: 6000
});

I was wondering if there is an easy way to modify this to have that happen? Or would you have to dive in to the main javascript file to modify it, in that case I would contact the author of the script and hire him to make the change?

Thank you!

Answer 1

If the plugin allows you to supply a callback for the slideShowDelay you could always try something like this:

$('#slider').oneByOne({
    className: 'oneByOne1',
    slideShow: true,
    easeType: 'none',
    enableDrag: false,
    showArrow: false,
    showButton: false,
    width: 1280,
    height: 720,
    delay: 0,
    slideShowDelay: function() { 
      $(this).attr('rel'); // 'this' should refer to the element you
                           // are extending if authored correctly
    }                                   
});

The callback would be run for each slide when its triggered, setting the timer. If the plugin doesn’t support this (and I can’t tell because it’s closed source) then you’ll have to contact the project owner or use a different plugin.