How to make jQuery slider work for generated IDs?

Question

I have created auto generated ids such as

gallary-item-0, gallery-item-1, gallery-item-1

and so on with PHP. How to configure jQuery to start a slider for each id. Here is the code I wrote but it works only for the first ID.

var i = 0;
sleepTime = setInterval(function () {
    var id = $(this).attr("id");           
    $('#gallery-item-'+i).ionImageSlider({
         slideWidth: 150,
         minSlides: 2,
         maxSlides: 10,
         moveSlides: 1,
         slideMargin: 50,
         pager: false
    });
    i++; 
    clearInterval(sleepTime);
}, 3000);
});

Answer 1

Don't call clearInterval(sleepTime) where you are calling it, because it will only fire once, like setTimeout .

Create a variable that has the count of all items with an id starting with gallery-item , and then call clearInterval in your handler when the count is reached.

var i = 0, 
total = $('[id^="gallery-item-"]').length,
sleepTime = setInterval(function () {
    $('#gallery-item-'+ i).ionImageSlider({
         slideWidth: 150,
         minSlides: 2,
         maxSlides: 10,
         moveSlides: 1,
         slideMargin: 50,
         pager: false
    });
    i++; 
    if (i == total - 1) {
        clearInterval(sleepTime);
    }     
}, 3000);

Answer 2

It's not clear what you are intending to use the timer for - show all after 3 seconds, or show each one after 3 seconds.

Without a timer:

for (var i=0;i<2;++i) {
    $('#gallery-item-'+i).ionImageSlider({
         slideWidth: 150,
         minSlides: 2,
         maxSlides: 10,
         moveSlides: 1,
         slideMargin: 50,
         pager: false
    });
}

With a single timer:

setTimeout(function() {
    ... same code as above ...
}, 3000);

With mutliple timers:

for (var i=0;i<2;++i) {
    var loopI = i;
    setTimeout(function() {
        $('#gallery-item-'+loopI).ionImageSlider({
             slideWidth: 150,
             minSlides: 2,
             maxSlides: 10,
             moveSlides: 1,
             slideMargin: 50,
             pager: false
        });
    }, 3000 + (i+1));
}

You can get the max items (The 2 in the code above) from your php or using a selector as in the comments.