圖片庫覆蓋和html內部無法覆蓋正確的圖像。 jQuery的

Question

嗨即時做一個畫廊，你有輕微的拇指，每一個選擇主圖像，如果你clic主圖像你想要得到一個覆蓋，內部覆蓋是圖片和一些額外的HTML。

好吧，我幾乎達到90％的代碼這裏http://jsfiddle.net/s6TGs/5/

即時通訊使用的只是jquerytools ..問題是，當你選擇第二拇指...你的覆蓋是thumb1疊加。即使當我確實改變了各自的（rel =「＃target」）。所以我想即時通訊做或缺少其他東西..

請有人向我解釋爲什麼即使在相應的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(); 
    }); 

Answer 1

好吧，至少我終於得到它的工作..現在我只需要建立一個Next和Prev按鈕。但我會嘗試，直到我真的不能那麼我問..無論如何..謝謝 這裏是代碼，如果它適合某人的需要。

<script> 
$(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", ""); 


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

    // 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); 
     wrap2.find("img").attr("src", url); 


    }; 

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