jQuery jCapSlide implementation - multiple elements with the same attributes, how to do a Javascript Array?

I'm not the best programmer, in fact I'm no programmer at all, I can handle HTML and CSS but anything more advanced is beyond me. I've implemented jCapSlide on a website, and it works fine, however, each of the images has to have it's own attributes, like so:

    <script type="text/javascript">
        $(function() {
            $("#capslide_img_cont").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont2").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont3").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont4").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont5").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont6").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont7").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont8").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont9").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont10").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont11").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont12").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont13").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont14").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont15").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont16").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont17").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont18").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont19").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });
            $("#capslide_img_cont20").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });

        });

    </script>

Obviously this creates a lot of redundant code, therefore loading time (and every little helps), so I'm after info on how to reduce this. I've tried this:

    <script type="text/javascript">            $(function() {
            $("#capslide_img_cont","#capslide_img_cont2","#capslide_img_cont3","#capslide_img_cont4","#capslide_img_cont5","#capslide_img_cont6","#capslide_img_cont7","#capslide_img_cont8","#capslide_img_cont9","#capslide_img_cont10","#capslide_img_cont11","#capslide_img_cont12","#capslide_img_cont13","#capslide_img_cont14","#capslide_img_cont15","#capslide_img_cont16","#capslide_img_cont17","#capslide_img_cont18","#capslide_img_cont19","#capslide_img_cont20"").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });

        });

    </script>

And this:

    <script type="text/javascript">
    var allBoxes=new Array("capslide_img_cont","capslide_img_cont2","capslide_img_cont3","capslide_img_cont4","capslide_img_cont5","capslide_img_cont6","capslide_img_cont7","capslide_img_cont8","capslide_img_cont9","capslide_img_cont10","capslide_img_cont11","capslide_img_cont12","capslide_img_cont13","capslide_img_cont14","capslide_img_cont15","cap开发者_开发技巧slide_img_cont16","capslide_img_cont17","capslide_img_cont18","capslide_img_cont19","capslide_img_cont20");
        $(function() {
            $("#allBoxes").capslide({
                caption_color   : 'white',
                caption_bgcolor : '#005ca7',
                overlay_bgcolor : 'orange',
                border          : '',
                showcaption     : true
            });

        });

    </script>

Neither of which work. Any suggestions gratefully appreciated!

---

$("[id^='capslide_img_cont']").capslide({
            caption_color   : 'white',
            caption_bgcolor : '#005ca7',
            overlay_bgcolor : 'orange',
            border          : '',
            showcaption     : true
    });

This will select all elements with ids that start with "capslide_img_cont". Here is a link to the jQuery selectors documentation where you can see all the different ways to select objects: http://api.jquery.com/category/selectors/

Also you were close with your first try but here is the proper implimentation:

$("#capslide_img_cont, #capslide_img_cont2, #capslide_img_cont3,...")

If you are worried about loading time I would recommend putting all of your "capslide_img_cont" elements into a div with an id, then using a selector like this (assuming the "capslide_img_count" elements are img tags):

$('#capslide_img_container').find('img').capslide...

This is a fast selector that finds the single element with the 'capslide_img_container' id and then finds all the img tags within it, whereas my example of [id^='capslide_img_cont'] searches every id on the page (a class-based selector also searches the whole page).

Example HTML:

<div id="capslide_img_container">
    <img id="capslide_img_cont" src="..." />
    <img id="capslide_img_cont2" src="..." />
    <img id="capslide_img_cont3" src="..." />
</div>

---

The easiest way would be to add a class that allows you to easily identify all of your images (or better yet add only a single class to the containing element for image slider), then iterate over the images using jQuery.

Example of a class on each image:

<img src="..." class="yourImgClass">

And in the JS:

$('.yourImgClass').each(function(){
   $(this).capslide({
       caption_color   : 'white',
       caption_bgcolor : '#005ca7',
       overlay_bgcolor : 'orange',
       border          : '',
       showcaption     : true
   });
});

If you instead wanted to add a class to the containing element, you would structure the HTML like:

<div class="myContainer">
   <img src="...">
   <img src="...">
</div>

And use jQuery to select each image within that container:

$('.myContainer img')