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;
});