jquery - シンプルなjQueryギャラリー内で元の画像を閉じて元に戻す?

Question

Papermashup.comの単純な jQuery ギャラリーを使用していますが、その機能を拡張するのに助けが必要です。現在、4 つのサムネイルと 1 つのメイン画像があります。ただし、元の画像のサムネイルを追加せずに、元の画像に戻せるようにしたいと考えています。別のサムネイルをクリックした場合、元に戻す方法はありますか?

HTML:

<div class="main"><img src="main.jpg"></div>

<div class="thumbs">
   <a class="t" href="main-lrg.jpg" rel="1"><img src="main-1.jpg"></a>
   <a class="t" href="main-lrg.jpg" rel="2"><img src="main-1.jpg"></a>
   <a class="t" href="main-lrg.jpg" rel="3"><img src="main-1.jpg"></a>
   <a class="t" href="main-lrg.jpg" rel="4"><img src="main-1.jpg"></a>
</div>

JS:

$(function() {
    $('.t').click(function() {
        var image = $(this).attr('rel');
        $('.main').hide();
        $('.main').fadeIn('fast');
        $('.main').html('<img src="' + image + '">');
        return false;
    });
});

Answer 1

srcDOM の読み込み時に元の画像属性を取得して、それを参照できるようにします。次に、元の画像をもう一度表示したい場合は、メイン画像のsrc属性を元に戻すだけです。たとえば、元の画像を表示するはずの ID が「閉じる」のボタンがある場合、次のようになります。

$(function() {
    var original = $('.main img').attr('src');

    $('#close').click(function() {
        $('.main img').attr('src', original);
        $(this).hide();
    });

    $('.t').click(function() {
        var image = $(this).attr('rel');
        $('.main').hide();
        $('.main').fadeIn('fast');
        $('.main').html('<img src="' + image + '">');
        $('#close').show();
        return false;
    });
});