Javascript Corresponding Caption Handling
<p>I have an image gallery with 6 images that I use Javascript to control. When you click on an image it fades out and the new one loads in. The thumbnails are in a "gallery" div, the main image is displayed in an empty "photo" div.</p>

<p>I cant figure out how to get a paragraph to load with the corresponding image. For instance, I want to load an image but also have a paragraph of text, specific to that image, load with it.</p>

<p>Would this have to be done with an array? I need some ideas. Here is the Javascript and the html.</p>

<pre><code>$('#gallery a').click(function(evt) {
evt.preventDefault();   
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('&lt;img src=" ' + imgPath + ' "&gt;');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();

&lt;div id="photo"&gt;
&lt;/div&gt;

&lt;div id="gallery"&gt;
&lt;a href="images/home1_h.jpg"&gt;&lt;img src="images/home1.jpg" alt="home 1"&gt;&lt;/a&gt;
&lt;a href="images/home2_h.jpg"&gt;&lt;img src="images/home2.jpg" alt="home 2"&gt;&lt;/a&gt;
&lt;a href="images/home3_h.jpg"&gt;&lt;img src="images/home3.jpg" alt="home 3"&gt;&lt;/a&gt;
&lt;a href="images/home4_h.jpg"&gt;&lt;img src="images/home4.jpg" alt="home 4"&gt;&lt;/a&gt;
&lt;a href="images/home5_h.jpg"&gt;&lt;img src="images/home5.jpg" alt="home 5"&gt;&lt;/a&gt;
&lt;a href="images/home6_h.jpg"&gt;&lt;img src="images/home6.jpg" alt="home 6"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>I want to point out that everything works. I am just lost as to where to start in order to load different paragraphs in with the proper image that is loaded when clicked. Here is the live site if interested:</p>

<p><a href="http://cisweb.bristolcc.edu/~rmailloux11/mm/Final/feat.html" rel="nofollow">Live site that you can view what is working already</a></p>
