Dynamically adding caption text to image gallery with zoom

JavaScript
1

I am trying to create a small gallery of images with a zoom effect - I have managed this with a plugin called ElevateZoom. The zoom functionality works well, the images swap when clicking on a thumbnail, but now I’d like to also add a caption to each image. So, the caption needs to also be attached to the function of the image swap. My javascript skills are minimal at best. I understand that I need to pass another parameter into the script, but it seems like I can’t attach both the zoom function (and thus the larger hidden image) plus the caption to one a href. Can someone help?

Here is a link to the work in progress: http://coastalcreations.net/new/gallery.html

Also, I am aware that it doesn’t validate because there is an ID used more than once on the page, but that was the way the ElevateZoom instructed. Not sure if it will still work if I remove all the extra ids that are on each image.

Thanks for your help!

2 
<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<meta name="keywords" content="Coastal Creations, seashell mirrors, creative shell mirrors" />
<meta name="description" content="Hand-crafted works of art brought to you from the coast of Maine"/>
<meta name="ROBOTS" content="index,follow,revisit 15 days"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<base href="http://coastalcreations.net/new/"  />
<title>Coastal Creations :: Gallery</title>
<link href='http://fonts.googleapis.com/css?family=Quintessential' rel='stylesheet' type='text/css'>

<link href="css/coastalcreations-styles.css" rel="stylesheet" type="text/css" />
<link href="css/portfolio-styles.css"  rel="stylesheet" type="text/css"/>

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   	<script src='js/jquery-1.8.3.min.js'></script>
	<script src='js/jquery.elevatezoom.js'></script>


</head>
<body>
<div id="wrapper">
<header>
  <a id="homelink" href="index.html"></a>

  <h1>Coastal Creations</h1>
<div id="mirrors">
<img src="assets/mirror-collage.png" height="199" width="173" alt="Mirror Collage"/>
</div>
  <nav>
  <ul>
  <li><a href="index.html">Home</a></li>
  <li>Gallery</li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
  </ul>
  </nav>
</header>

<section>
<h2>Our Mirrors</h2>
<p>Hover your mouse over the larger image to zoom in and see the details. Click on any of the thumbnails below to see the full image</p>

<div id="image"><img  class="fancybox"  id="zoom_01" src='gallery-test/images/small/2_EbbTide_Square_19x19.png' data-zoom-image="gallery-test/images/large/2_EbbTide_Square_19x19.jpg" alt="mirror"/></div><!-- end image div -->

<div id="captions" style="position:relative;height:20px;background-Color:#FFCC66;text-Align:center;" >
 <div >Caption 1</div>
 <div >Caption 2</div>
 <div >Caption 3</div>
 <div >Caption 4</div>
 <div >Caption 5</div>
 <div >Caption 6</div>
 <div >Caption 7</div>
 <div >Caption 8</div>
</div>
<br/>
<div id="gallery_01">
 	<a href="#" data-image="gallery-test/images/small/2_EbbTide_Square_19x19.png" data-zoom-image="gallery-test/images/large/2_EbbTide_Square_19x19.jpg" >
    <img class="fancybox" src="gallery-test/images/thumb/2_EbbTide_Square_19x19.jpg" />
  </a>

  <a href="#" data-image="gallery-test/images/small/1_Captiva_SpanishArch_26x41.jpg" data-zoom-image="gallery-test/images/large/1_Captiva_SpanishArch_26x41.jpg" title="Captiva Spanish Arch" content="26&quot; x 41&quot;" >
    <img class="fancybox"  src="gallery-test/images/thumb/1_Captiva_SpanishArch_26x41.jpg"  alt="mirror" />
  </a>

  <a href="#" data-image="gallery-test/images/small/3_Dunes_LargeBidirectional_33x45.jpg" data-zoom-image="gallery-test/images/large/3_Dunes_LargeBidirectional_33x45.jpg">
    <img class="fancybox" src="gallery-test/images/thumb/3_Dunes_LargeBidirectional_33x45.jpg"  alt="mirror" />
  </a>

  <a href="#" data-image="gallery-test/images/small/4_SeaBreeze_FancyGoldBorder_21.5x32.5.jpg" data-zoom-image="gallery-test/images/large/4_SeaBreeze_FancyGoldBorder_21.5x32.5.jpg">
    <img class="fancybox" src="gallery-test/images/thumb/4_SeaBreeze_FancyGoldBorder_21.5x32.5.jpg"  alt="mirror" />
  </a>

  <a href="#" data-image="gallery-test/images/small/5_Atlantis_BorderWCrest_30.5x44.jpg" data-zoom-image="gallery-test/images/large/5_Atlantis_BorderWCrest_30.5x44.jpg">
    <img class="fancybox" src="gallery-test/images/thumb/5_Atlantis_BorderWCrest_30.5x44.jpg"  alt="mirror" />
  </a>

   <a href="#" data-image="gallery-test/images/small/6_Windward_NarrowFrame_20.5x25.5.jpg" data-zoom-image="gallery-test/images/large/6_Windward_NarrowFrame_20.5x25.5.jpg">
    <img class="fancybox" src="gallery-test/images/thumb/6_Windward_NarrowFrame_20.5x25.5.jpg"  alt="mirror" />
  </a>

   <a href="#" data-image="gallery-test/images/small/7_Neptune_Octagonal_30x30.jpg" data-zoom-image="gallery-test/images/large/7_Neptune_Octagonal_30x30.jpg">
    <img class="fancybox" src="gallery-test/images/thumb/7_Neptune_Octagonal_30x30.jpg"  alt="mirror" />
  </a>

   <a href="#" data-image="gallery-test/images/small/8_Sanibel_LargeBidirectional_33x45.jpg" data-zoom-image="gallery-test/images/large/8_Sanibel_LargeBidirectional_33x45.jpg">
    <img class="fancybox" src="gallery-test/images/thumb/8_Sanibel_LargeBidirectional_33x45.jpg"  alt="mirror" />
  </a>

</div><!-- close gallery_01-->
</section>
</div><!-- close wrapper -->
<footer>
<p class="contact"><a href="mailto:dstair@coastalcreations.net">dstair[at]coastalcreations[dot]net</a></p>
<p><!-- Generated by www.webweaver.nu -->
<script type="text/javascript">
/*<![CDATA[*/
var zxcCaptions={

 init:function(o){
  var cp=document.getElementById(o.CaptionsID),gp=document.getElementById(o.GalleryID),n=o.DisplayIndex,n=typeof(n)=='number'?n:0;
  if (cp&&gp){
   var clds=cp.childNodes,ca=[],imgs=gp.getElementsByTagName('IMG'),z0=0,z1=0;
   for (;z0<clds.length;z0++){
    if (clds[z0].nodeType==1){
     clds[z0].style.position='absolute';
     clds[z0].style.visibility=ca.length!=n?'hidden':'visible';
     ca.push(clds[z0]);
    }
   }
   for (;z1<imgs.length;z1++){
    if (ca[z1]){
     this.addevt(imgs[z1],'click','caption',o,z1);
    }
   }
   o.n=n;
   o.ca=ca;
  }
 },

 caption:function(o,n){
  o.ca[o.n]?o.ca[o.n].style.visibility='hidden':null;
  o.ca[n]?o.ca[n].style.visibility='visible':null;
  o.n=n;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }

}

zxcCaptions.init({
 CaptionsID:'captions',
 GalleryID:'gallery_01',
 DisplayIndex:0
});
/*]]>*/
</script><script>
<!--
document.write('&copy; ' );
document.write(new Date().getFullYear());
document.write('  CoastalCreations.net - All Rights Reserved.');
//-->
</script>
</p>
</footer><!--close footer-->


<script>

	$("#zoom_01").elevateZoom({
			gallery:'gallery_01',
			cursor: 'pointer',
			galleryActiveClass: 'active',
			imageCrossfade: true,
			zoomType: "inner",
			zoomWindowFadeIn: 500,
			zoomWindowFadeOut: 750
			//loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'
							  });

	$("#zoom_01").bind("click", function(e) {
  var ez =   $('#zoom_01').data('elevateZoom');
	$.fancybox(ez.getGalleryList());
  return false;
});

</script>

<!--<script type="text/javascript">

$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
var title = $(this).attr("title");
var description = $(this).attr("content");
$('#gallery').hide();
$('#gallery').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
$('#title').html(title);
$('#description').html(description);
return false;
	});
});
</script>-->

</body>
</html>
3