CODEWITHSUNDEEP
javascriptjqueryhtml
Robbert
Robbert

Reputation: 1330

Active thumb in image gallery

I made this image gallery but I want to give the active thumb a class="active". I can give the .small_image a class "active" if I click on it but then after I click the other thumbs they all get a class "active". So I thought if I make an if statement, if the rel and src of the big image and the Thumbnail are the same, give a class "active" but my code doesn't work. Can anyone tell me what I'm doing wrong?

http://jsfiddle.net/XNsHC/8/

$(document).ready(function () {
        $(".small_image").click(function () {
            event.preventDefault();
            var image = $(this).prop("rel");
            $('#under').prop('src', image);
            $('#above').fadeOut(600, function () {
                $('#above').prop('src', $('#under').prop('src')).css('display', 'block');
            });
        });

        if($(".small_image").prop("rel") == $("#under").prop('src', image)){
            $(this).addClass('active');

        }
    });

Upvotes: 0

Views: 244

Answers (1)

Yotam Omer
Yotam Omer

Reputation: 15376

Try something like this: (working jsFiddle - added red border around .active)

$(".small_image").click(function () {
    event.preventDefault();
    $('.small_image.active').removeClass('active'); // remove "active" from current image
    $(this).addClass('active'); // add "active" to the new one
    var image = $(this).prop("rel");
    $('#under').prop('src', image);
    $('#above').fadeOut(300, function () {
        $('#current_image #above').prop('src', $('#current_image #under').prop('src'));
    });
}).eq(0).addClass('active'); // set the first one as "active" by default

Upvotes: 1

Related Questions