Question

My script is meant to find the link to a fullsize picture from a thumbnail and open it up in a modal window. It works fine in Chrome but just follows the link and seems to ignore the script in firefox.

   $(".gallery-item").click(function(e) {
     e.preventDefault();
    //get var to hold ".galler-icon a" for this specific pic
    var imagelink = $(this).children().children().attr('href');
    $('#dialog').append('<img id="theImg" class="resize" src="' + imagelink + '" />');
    var caption = $(this).find(".gallery-caption ").text();
    $('#dialog').append('<p id="theCaption">' + caption + '</p>');
    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({
        'width': maskWidth,
        'height': maskHeight
    });

    //transition effect     
    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow", 0.8);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();
    //Set the popup window to center
    $("#dialog").css('top', winH / 2 - $("#dialog").height() / 2);
    $("#dialog").css('left', winW / 2 - $("#dialog").width() / 2);

    //transition effect
    $("#dialog").fadeIn(2000);
    //if close button is clicked
    $('.window .close').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
        $('#theImg').remove();
        $('#theCaption').remove();
    });

    //if mask is clicked
    $('#mask').click(function() {
        $(this).hide();
        $('.window').hide();
        $('#theImg').remove();
        $('#theCaption').remove();
    });
    return false;
});

To summarize firefox ignores this script and follows the link. How can I fix this?

Answer 1

Do you have this .click() bind running within the document.ready handler? If not, that is likely the source of your problem.

$(function () {
  $(".gallery-item").click(function(e) {
  e.preventDefault();
  // etc...
  });
});

edit

Since that didn’t work, the next thought that occurs is that you should try changing your class name to something without the hyphen. That could be tripping up FF. Give it a shot.