views:

313

answers:

0

Hi,

I have a portfolio gallery with thumbnails along the left column and a large image on the right/center column. When the user clicks a thumbnail, this script loads in the large image and displays it in the place of the current image. Of course, there are some awesome animations happening. The script runs perfectly in IE 6 (go figure), FF, Chrome, and Safari but fails in IE 7.

Steps to recreate the problem:

Using IE 7, go to the following URL: http://dev.esarch.com/places/detail/atrium-medical-center/

Click a few images and then refresh the page. Now when you click on the images, the main image fades out, the loader fades in, and just sits there. No error, nothing. Below is the script, I would appreciate any help you can offer!

$('.thumbnail img').click(function() {

        // This function by Jesse Bunch

        var strSRC = $(this).attr("id");

        // Object references
        var objThumb = $(this);
        var objBigImg = $("#large-portfolio");
        var objLi = objThumb.parent().parent();

        // Check to see if user is already viewing this image
        if (strSRC == objThumb.attr("src")) {
            return;
        }



        // Show AJAX loader 
        objLi.css("background-repeat", "no-repeat");
        objLi.css("background-position", "37px 37px")
        objLi.css("background-image", "url(/css/img/ajax-loader.gif)");

        objThumb.animate({opacity: 0.5}, 500, function() {
                // Fade out current image
                objBigImg.animate({opacity: 0.0}, 500, function() {

                    // Get the next image's dimensions
                    $.ajax({
                        url: "/scripts/calc_dimensions.php",
                        type: "POST",
                        data: ({
                            type : 'max_dims',
                            src: strSRC,
                            width: 570,
                            height: 525  
                        }),
                        dataType: 'json',
                        success: function(data) {

                            // Check for server-side errors
                            if (data.error != null) { alert('An error ocurred: ' + data.error); } else {

                                // No error, so swap out the image and size it up correctly
                                objBigImg.attr("src", strSRC).error(function(){ alert('Error loading image.'); }).load(function(){
                                    objBigImg.attr("width", data.width);
                                    objBigImg.attr("height", data.height);

                                    // Fade the main image back in
                                    objBigImg.animate({opacity: 1.0}, 150, function() {
                                        // Remove the loader
                                        objThumb.animate({opacity: 1.0}, 150);

                                    });
                                });
                            }
                        },
                        error: function(objRequest, strStatus, objErrorThrown) {
                            alert("Error: " + objRequest.statusText);
                        }
                    });         
                });
        });

        return false;
    });