I am trying to make clickable links in a image box of a scroller. I tried changing the #captions p to #captions a in the change image section but no luck. Help please.


<div id="image_wrap" style="margin:0;padding:0">
<!-- Initially the image is a simple 1x1 pixel transparent GIF -->
<div id="caption_wrap">
<div id="image_caption">
<p id="caption_text"></p>
</div>
</div>
<img src="contentImages/monstersU/17312c-th.jpg" width="400" height="400" style="border:1px solid #0066cc;"/>
<div id="captions">
<a href="http://www.decopac.com/detail_17312M__1-1-464.html"><p> Monsters Univ Students Mike & Sulley Decoset: #17312<br></p> </a>
<a href="http://www.decopac.com/detail_17367__89.html"><p>Monsters University Cupcake Platter: #17367<br></p></a>

<script>
jQuery(function() {
jQuery(".scrollable").scrollable();
var thumbindex = 0;

jQuery(".items img").click(function() {
thumbindex = jQuery(".items img").index(this);
// see if same thumb is being clicked
if (jQuery(this).hasClass("active")) { return; }


// calclulate large image's URL based on the thumbnail URL
var url = jQuery(this).attr("src").replace("-th", "");
//var imageID = jQuery(this).attr("rel");
// get handle to element that wraps the image and make it semi-transparent
//var wrap = jQuery("#image_wrap").fadeTo("medium", 0.5);
var wrap = jQuery('#image_wrap').fadeTo("medium", 0.5);

// the large image from www.flickr.com
var img = new Image();


// call this function after it's loaded
img.onload = function() {

// make wrapper fully visible
wrap.fadeTo("fast", 1);

// change the image
wrap.find("img").attr("src", url);
var captiontext = jQuery("#captions a").eq(thumbindex).html();//grab the caption related to the thumbnail clicked
if (captiontext != ""){//if there is a caption
jQuery("#image_caption").empty().append(captiontext).stop().fadeTo(500, 0.7);//remove the previous caption and show the current one fading in to 70% opacity
}

};

// begin loading the image from www.flickr.com
img.src = url;

// activate item
$(".items img").removeClass("active");
$(this).addClass("active");

//$("div").text(captionID);



// when page loads simulate a "click" on the first image
}).filter(":first").click();

jQuery("img[rel]").overlay({
mask: '#789'
});


});
</script></div>
</div>
</div>
</div>
</div>

<div class="clearIt"><!-- --></div>

</div>

</div>

<div id="footer">


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-5898148-1";
urchinTracker();
</script>