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.
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.
http://brianfarris.org/kola/gallery.php
Here's my jQuery:
$(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?
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.
$(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();
});
});