tags:

views:

82

answers:

2

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>
+3  A: 

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.

Mike
if I use the 'title' attribute which is standard and recognized by all major browswers - the event still does not fire in firefox.
FiveTools
@FiveTools - Are you sure it's the event not firing and not something else? It looks as though the event should be an problem at all.
JasCav
the event fires as anticipated in IE
FiveTools
@FiveTools - Not what I meant. What I'm asking is - are you sure the problem is the event not firing in Firefox. Perhaps it IS firing and something else is going on. Have you tried using Firebug to debug your code and walk through it to ensure that what you think is going wrong is what is actually going wrong. I hope this helps you a bit.
JasCav
+1  A: 

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");
Hugo
The javascript code that creates the image gallery (imageflow) is causing a problem with the image click events in firefox. I've tried variations of the original jquery (similar to your code) and it worked. hmmmmm......
FiveTools
I did get my code working in both browsers using code specific to IE and FF within the imageflow script. For purposes of the question - the above works - so I will mark this question as the answer. Thanks for your help.
FiveTools
Just glad it's working now. I think fancybox implemented the method trigger as described in my answer for exactly that reason. I would not use click() but trigger('click') if I were you.
Hugo