Combining repeating jquery function

Question

I'm using the Wordpress plugin Advanced Ajax Page loader. In order to reload the script after an ajax page load I'm using this reload code to reload an image slider.

var metaslider_804 = function(jQuery) {
        jQuery('#metaslider_804').flexslider({ 
            slideshowSpeed:6000,
            animation:"fade",
            controlNav:false,
            directionNav:true,
            pauseOnHover:true,
            direction:"horizontal",
            reverse:false,
            animationSpeed:600,
            prevText:"<",
            nextText:">",
            easing:"swing",
            slideshow:true,
            useCSS:false
        });
    };
    var timer_metaslider_804 = function() {
        var slider = !window.jQuery ? window.setTimeout(timer_metaslider_804, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_804, 100) : metaslider_804(window.jQuery);
    };
    timer_metaslider_804();

Since I'm using different sliders on different pages I repeated the above code for each slider, by just changing the slider ID. E.g. changed the ID 804 to 824

var metaslider_824 = function(jQuery) {
        jQuery('#metaslider_824').flexslider({ 
            slideshowSpeed:6000,
            animation:"fade",
            controlNav:false,
            directionNav:true,
            pauseOnHover:true,
            direction:"horizontal",
            reverse:false,
            animationSpeed:600,
            prevText:"<",
            nextText:">",
            easing:"swing",
            slideshow:true,
            useCSS:false
        });
    };
    var timer_metaslider_824 = function() {
        var slider = !window.jQuery ? window.setTimeout(timer_metaslider_824, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_824, 100) : metaslider_824(window.jQuery);
    };
    timer_metaslider_824();

Whilst this setup works, it doesn't seem like the best way to do it, especially since I'm using 8 sliders. Is there a better to do this? Something like:

$sliderIDs = "804, 824, xxx, xxx, etc"

var metaslider_$sliderIDs = function(jQuery) {
    jQuery('#metaslider_$sliderIDs').flexslider({ 
        slideshowSpeed:6000,
        animation:"fade",
        controlNav:false,
        directionNav:true,
        pauseOnHover:true,
        direction:"horizontal",
        reverse:false,
        animationSpeed:600,
        prevText:"<",
        nextText:">",
        easing:"swing",
        slideshow:true,
        useCSS:false
    });
};
var timer_metaslider_$sliderIDs = function() {
    var slider = !window.jQuery ? window.setTimeout(timer_metaslider_$sliderIDs, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_$sliderIDs, 100) : metaslider_$sliderIDs(window.jQuery);
};
timer_metaslider_$sliderIDs();

musicnothing · Accepted Answer · 2013-07-08 16:25:08Z

1

There are two possibilities.

Try giving a common class to each of these #metaslider_... elements, like myslider. Then call the plugin like this:

jQuery('.myslider').flexslider({
    //...
});

I looked in the code for this plugin, and it calls a $.each on whatever you've selected, so theoretically this should work. (See this example.)

Your other choice is to put each unique id into an array and iterate through it, like this:

var slider_ids = [804, 824, ...];

for (var i = 0, len = slider_ids.length; i < len; i++) {
    jQuery('#metaslider_' + slider_ids[i]).flexslider({ 
        //...
    });
}

edited Jul 8, 2013 at 16:25

answered Jul 8, 2013 at 16:17

musicnothing

3,98526 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user18144 Over a year ago

Brilliant, I tried the second method and it worked flawlessly. Thanks :)

Collectives™ on Stack Overflow

Combining repeating jquery function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related