Custom jQuery Gallery Settings

Im using jQuery to create button that will show Photos with absolute position. However, i tried to configure the code with this.

$('#thumbsets li').each(function (i) {
    i = i+1;
    $(this).addClass('ts'+i);
});

$('#web_overview details').each(function (i) {
    i = i+1;
    $(this).addClass('panels'+i).hide();
});

After that, i will create now the main button since i have all specified classes in each class.

$('#web_overview details').each(function (i) {
    i = i+1;
    $(this).addClass('panels'+i).hide(); //Hide all main photos

    // Create button command
    $('.ts'+i).bind({
        click: function() {
            $('.panels'+i).show(); //If clicked photos will show up

            //Fallback for the other photos
        }
    });
});

Now my issue here is, how can i load back again the previous photo if i click .ts1 since .panels2 stuck over the .panels1

Here's my sample output:

.ts1 -> .panels1 | .ts2 -> .panels2 | .ts1 -> .panels1 (if i click again the .ts1 to load it ba开发者_如何学运维ck on the framebox .panels2 will remain at the top of .panels1.)

Thanks in advance if someone can give me idea on how to fix this.

---

$('.ts'+i).bind({
    click: function() {
        $('.panels').hide();   //####### Is this what you are missing?  ########
        $('.panels'+i).show(); //If clicked photos will show up

        //Fallback for the other photos
    }
});

You have to hide any visible .panels before opening a new one.

---

But I think you are overcomplicating it... I used too once to assign classes to elements like you do. Why not try with something more simple?

$('.details').hide(); // hide all details

$('#thumbsets li').bind('click',function() {
    var tsLi = $(this).index(); // all elements in collection are indexed
    $('.details').stop().fadeTo(400,0).eq(tsLi).fadeTo(400,1);
});

That's all!

DEMO JSFiddle