Jquery click event not working in Firefox

Hi
I am working on a Jquery image slider.
Basically I have a main image on the top and  few thumbnail images at the bottom.
When I click on the thumbnail image, it should show up as the main image on the Top.
My following code is working perfectly on IE but its not working on Fire Fox.
When the page loads It displays the l images properly,  but when I click on one of the thumbnail images , main image on the Top is not changing. Basically click event is not working in Fire Fox.
I am using Firefox 3.5.11 version.
Not sure why its not woking in Fire fox .
Any suggestions or help is  appreciated.

Thanks

Ken



var images = new Array();
    var currentIndex = 0;
    var stripSize;

    $(function() {
        LoadImages();
        InitializeFilmStrip();
        // set default border for thumbnail to 0px
        $('.ImgThumbnail').css({ "borderWidth": "0px" });
        // setting mouse over thumbnail effect
        $('.ImgThumbnail').hover(function() {
            $(this).css({ "borderWidth": "2px" });
        },
                function() { $(this).css({ "borderWidth": "0px" }); }
            );

        // setting click event for each thumbnail
            $('.ImgThumbnail').click(function() {
                var thumbSrc = $(this).attr("src");
                $('#viewerImg').attr({ "src": thumbSrc, "title": thumbSrc });
            });
      

        $('#rightArrow').click(function() { MoveImages("right"); ResetImages("right"); })
                .hover(function() { StartFlashing($(this)); }, function() { StopFlashing($(this)); });
        $('#leftArrow').click(function() { MoveImages("lefT"); ResetImages("left"); })
                .hover(function() { StartFlashing($(this)); }, function() { StopFlashing($(this)); });
    });

    function StopFlashing(obj) {
        $(obj).stop(true).css("opacity", "show");
    }

    function StartFlashing(obj) {
        $(obj).animate({ "opacity": "toggle" }, "slow", "linear", function() { StartFlashing(obj); });
    }


<div class="right_col">
            <div id="viewer" style="width:500px">
                <img id="viewerImg" />
                <div width="500px">
                   
                    <div id="filmstrip" class="FilmStrip">
                     <img id="leftArrow" tooltip="Previous Page" src="Images/left_arrow.png" class="MovingLeft" />
                        <img src="Images/BigThumbnail1.gif" class="ImgThumbnail" />
                        <img src="Images/BigThumbnail2.gif" class="ImgThumbnail" />
                        <img src="Images/BigThumbnail3.gif" class="ImgThumbnail" />
                        <img src="Images/BigThumbnail4.gif" class="ImgThumbnail" />
                         <img id="rightArrow" tooltip="Next Page" src="Images/right_arrow.png" class="MovingRight" />
                    </div>
                   
                </div>
            </div>
        </div>

Open in new window

artnet1Asked:
Who is Participating?
 
SRigneyConnect With a Mentor Commented:
Without being able to see the site in action it's harder to see what the problem is.  Let's try this.

Try adding this to help identify where it is having the error.

Instead of
 // setting click event for each thumbnail
            $('.ImgThumbnail').click(function() {
                var thumbSrc = $(this).attr("src");
                $('#viewerImg').attr({ "src": thumbSrc, "title": thumbSrc });
            });


 // setting click event for each thumbnail
alert( "number of .imgthumbnails found (should be > 0): " + $('.ImgThumbnail').size() );
            $('.ImgThumbnail').click(function() {
alert(".imgThumbnail clicked");
                var thumbSrc = $(this).attr("src");
alert("source attribute: " + thumbSrc);
alert("viewerImage count (should be 1): " + $('#viewerImg').size());
                $('#viewerImg').attr({ "src": thumbSrc, "title": thumbSrc });
            });
0
 
SRigneyCommented:
you can verify if it's actually calling the click by putting a break point in the click event with Firebug.

One thing I would suggest looking for is multiple items in the page with an id of viewerImg

I've had instances where using $("#viewerImg") in IE will return the first item that matches that id, while in Firefox nothing is returned.  Id's are supposed to be unique and I think the fact that it's not unique causes Firefox to not return it.
0
 
artnet1Author Commented:
Hi

I tried putting an alert  after  the click event.
Its never reaching the alert in Firefox .

"viewerImg" id is used only once.
Still not working.
Any other solution??


0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
SRigneyCommented:
Is this on a site that's public and I can look at?
0
 
SRigneyCommented:
in Firebug you can use the console to type
$("#viewerImg").size() and make sure that it is matching something.
0
 
artnet1Author Commented:
Hi Rigney

Unfotunately its not live yet. So you cant look at it .
In Firebug $("#viewerImg").size()  is giving the value 1

0
 
artnet1Author Commented:
Hi Rigney

Please desregard my earlier message.
when I checked $("#viewerImg").size() from Firefox>Tool>ErrorConsole
I am getting error "$ not defined".
0
 
SuchetaLCommented:

~* " I am getting error "$ not defined". *~

Have you included the call to include Jquery ? And is it getting included correctly?  
Incase you have not included try adding the following to the top of your code & execute
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
0
 
artnet1Author Commented:
thanks for your advice!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.