This function attaches the fancybox plugin to some images. When an image is clicked in the image slider, it opens the corresponding larger image within the '#hidden images' div. It works in Internet Explorer but does not work in Firefox (3.6.9). How do i get it to work in Firefox?
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_images a").fancybox();
$("#image_slider img").click(function(event) {
var $tgt = $(event.target);
var $desc = $tgt.attr("longdesc");
$("#" + $desc).click();
});
});
</script>
Here is my HTML:
<div id="image_slider" class="imageflow">
<img src="images/press/charity1.jpg" longdesc="charity1" width="250" height="250" alt="Charity 1" />
<img src="images/press/charity2.jpg" longdesc="charity2" width="250" height="250" alt="Charity 2" />
</div>
<div id="hidden_images">
<a id="charity1" href="images/press/charity1_lg.jpg" style="display:none;"><img src="images/press/charity1_lg.jpg" alt="charity one caption"/></a>
<a id="charity2" href="images/press/charity2_lg.jpg" style="display:none;"><img src="images/press/charity2_lg.jpg" alt="charity two caption"/></a>
</div>