Skip to main content

Forums

This topic contains 1 reply, has 0 voices, and was last updated by  brianatlarge 9 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #28894

    brianatlarge
    Member

    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?

    #75030

    brianatlarge
    Member

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star