fadeIn doesn’t work in IE 7

[brianatlarge]

I made an image gallery using jQuery and it works great…. except in IE7. Basically whenever you click a thumbnail, the current image fades out, then the new image fades in. Works fine in all other browsers, but in IE7, the image fades out and then nothing.

http://brianfarris.org/kola/gallery.php

Here’s my jQuery:

Code:

$(document).ready(function () {
//Hide all gallery images and captions
$(‘#galleryLarge img’).each(function() {
$(this).css(‘margin-bottom’, ‘-3px’);
$(this).hide();
});
$(‘#galleryCaption p’).each(function() {
$(this).hide();
});

//Only show the first gallery image and caption when gallery first loads
$(‘#galleryLarge img’).first().show();
$(‘#galleryCaption p’).first().show();

$(‘#galleryThumbs li a’).click(function() {
var imgID = $(this).attr(‘id’);
$(‘#galleryLarge img’).fadeOut();
$(‘#galleryLarge img#’+imgID).fadeIn();

var currentCaption = $(this).attr(‘class’);
$(‘#galleryCaption p’).hide();
$(‘#galleryCaption p.’+currentCaption).show();
});
});

Anyone have this kind issue before?

[brianatlarge]

I fixed the problem.

Basically my intention was to use ID’s to link up the thumbnail image with the large image, so that I could store the clicked image ID in a variable and then attach that to the ID of the gallery image that I wanted to show. The problem is, this made duplicate ID names, which is a no no.

Strangely enough, FireFox, Chrome, and IE8 were forgiving enough to allow this to work. I ended up fixing this by giving the gallery images rel values equal to its respective thumbnail ID name. And now it works perfectly.

Code:

$(document).ready(function () {
//Hide all gallery images and captions
$(‘#galleryLarge img’).each(function() {
$(this).css(‘margin-bottom’, ‘-3px’);
$(this).hide();
});
$(‘#galleryCaption p’).each(function() {
$(this).hide();
});

//Only show the first gallery image and caption when gallery first loads
$(‘#galleryLarge img’).first().show();
$(‘#galleryCaption p’).first().show();

$(‘#galleryThumbs li a’).click(function() {
var imgID = $(this).attr(‘id’);
$(‘#galleryLarge img’).fadeOut();
$(‘#galleryLarge img[rel=”‘+imgID+'”]’).fadeIn();

var currentCaption = $(this).attr(‘class’);
$(‘#galleryCaption p’).hide();
$(‘#galleryCaption p.’+currentCaption).show();
});
});

[Author]

Posts