javascript - Swapping images and captions at same time -

i have image gallery trying make far works fine. problem no matter how try, cannot each image have own caption when swap them out using javascript. before gets upset me question, have looked on here , found how people add captions using html when swap images taht wont work. thought maybe create empty div , insert html text using javascript, how can caption load matches appropriate pic? array option here? here page in question.

my site

i leave "photo" div empty image can load it. far works. confused on captioning.

here javascript code

$('#gallery img').each(function(i) {     var imgfile = $(this).attr('src');     var preloadimage = new image();   var imgext = /(\.\w{3,4}$)/;   preloadimage.src = imgfile.replace(imgext,'_h$1');      $(this).hover(         function() {             $(this).attr('src', preloadimage.src);         },         function () {         var currentsource=$(this).attr('src');             $(this).attr('src', imgfile);     }); // end hover }); // end each     $('#gallery a').click(function(evt) { evt.preventdefault();    var imgpath = $(this).attr('href'); var oldimage = $('#photo img'); var newimage = $('<img src=" ' + imgpath + ' ">'); newimage.hide(); $('#photo').prepend(newimage); newimage.fadein(1000); oldimage.fadeout(1000,function(){ $(this).remove(); }); }); $('#gallery a:first').click(); 

and html

<div id="main">         <!-- main content -->  <div id="photo"> </div>  <div id="gallery"> <a href="images/home1_h.jpg"><img src="images/home1.jpg" alt="home 1"></a> <a href="images/home2_h.jpg"><img src="images/home2.jpg" alt="home 2"></a> <a href="images/home3_h.jpg"><img src="images/home3.jpg" alt="home 3"></a> <a href="images/home4_h.jpg"><img src="images/home4.jpg" alt="home 4"></a> <a href="images/home5_h.jpg"><img src="images/home5.jpg" alt="home 5"></a> <a href="images/home6_h.jpg"><img src="images/home6.jpg" alt="home 6"></a> </div>  </div> 

i this

$('#gallery img').click(function(evt) {       var elem = $(this);     var oldimage = $('#photo img');     $('#photo').prepend($('<img src=" ' + elem.attr('src') + ' ">').hide().fadein(1000));     oldimage.fadeout(1000,function(){        $(this).remove();        $("#caption").html(elem.attr('alt')); // set caption     }); });  $('#gallery img:first').trigger('click'); 

and html

<div id="main">         <!-- main content -->  <div id="photo">    <div style="text-align:center" id="caption"></div> </div>  <div id="gallery">     <img src="images/home1_h.jpg" alt="home 1">     <img src="images/home2_h.jpg" alt="home 2">     <img src="images/home3_h.jpg" alt="home 3">     <img src="images/home4_h.jpg" alt="home 4">     <img src="images/home5_h.jpg" alt="home 5">     <img src="images/home6_h.jpg" alt="home 6">  </div>  </div> 

and bit of css

#gallery img {      opacity: 0.8;      cursor: pointer; } #gallery img:hover {      opacity: 1 }