带有 Overlay 和 html 的图像库无法覆盖正确的图像。 jQuery

Question

您好，我正在做一个画廊，您有拇指，每个人都选择主图像，如果您单击主图像，您应该得到一个叠加层，该叠加层内是图片和一些额外的 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>