How to add the relevant caption to a random image in a different div?
<p>I don't know quite where to start with this idea. I'm using the jQuery below to show a random image with each page load. I'd like to extend it to show a specific caption with each image that is displayed in a different div.</p>

<p>The function below outputs a random image.jpg in the format image1.jpg, image2.jpg, etc. I'm thinking I need an array of the captions for each image, but how can I reference the array and output the caption by the image name in the function?</p>

<pre><code>&lt;script&gt;
(function($){

    $.randomImage = {
        defaults: {

            path: 'headerimages/',

            myImages: ['image1.jpg', 'image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg' ]         
        }           
    }

    $.fn.extend({
            randomImage:function(config) {

                var config = $.extend({}, $.randomImage.defaults, config); 

                 return this.each(function() {

                        var imageNames = config.myImages;

                        var imageNamesSize = imageNames.length;

                        var randomNumber = Math.floor(Math.random()*imageNamesSize);

                        var displayImage = imageNames[randomNumber];

                        var fullPath = config.path + displayImage;

                        $(this).attr( { src: fullPath, alt: displayImage });
                }); 
            }
    });

})(jQuery);
&lt;/script&gt;
</code></pre>

<p>The image from the function above is displayed by the html <code>&lt;img class="randomheader" src="" alt="image"&gt;</code></p>

<p>The caption will be in a different div, i.e. <code>&lt;div class="caption"&gt;&lt;/div&gt;</code>
The CSS for <code>#caption</code> would probably be <code>display:none</code> until the jQuery loads.</p>

<p>This is the doc ready function:</p>

<pre><code>&lt;script&gt;
$(document).ready(function(){
 $('.randomheader').randomImage();
});
&lt;/script&gt;
</code></pre>
