javascript - オーバーレイと html を含む画像ギャラリーは、正しい画像をオーバーレイすることができません。jquery

Question

こんにちは、あなたが親指を持っているギャラリーをやっています。それぞれがメイン画像を選択します。メイン画像をクリックすると、オーバーレイが表示され、そのオーバーレイ内に画像と追加の html が表示されます。

OK、ここでそのコードの90％をほぼ達成していますhttp://jsfiddle.net/s6TGs/5/

私はjquerytoolsだけを使用しています..問題は、2番目の親指を選択したときです...得られるオーバーレイはthumb1のオーバーレイです..それぞれの (rel="#target") を変更しても。だから私は何か他のことをしている、または見逃していると思います..

Pls は、対応する rel が変更された後でも、トリガーが常に item1 の理由を説明してくれます。

前もって感謝します。

ここにスクリプトがあります

$(function() {
$(".scrollable").scrollable();

$(".items img").click(function() {
    // see if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }

    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src").replace("_t", "");

    var relo = $(this).attr("relo");

    // get handle to element that wraps the image and make it semi-transparent
    var wrap = $("#image_wrap").fadeTo("medium", 0.5);

    // the large image from www.flickr.com
    var img = new Image();


    // call this function after it's loaded
    img.onload = function() {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);
        wrap.find("img").attr("rel", relo);

    };

    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    $(".items img").removeClass("active");
    $(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").click();
});

// This makes the image Overlay with a div and html

  $(document).ready(function() {
      $("img[rel]").overlay();
    });