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>
Your problem might be the use of the longdesc, which is not supported by major browsers. Internet Explorer may be allowing you to add an attribute to the DOM that it does not recognize, while FireFox may disallow this behavior. Try storing the description in the alt attribute, or if need be, in through jquery's data method.
For all intent and purposes you can have a foo="bar" attribute and that'll still work. Here's how I would code the inner portion of your jquery
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_images a").fancybox();
$("#image_slider img").click(function(event) {
window.location = $("#" + $(event.target).attr("longdesc")).attr("href");
});
});
</script>
Works for me on safari, ff and chrome.
Edit Derr, I think I misread your post that might not be what you are looking for...
Edit 2 AHA Moment, here's how you do it.
$("#" + $(event.target).attr("longdesc")).fancybox().trigger("click");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With