0

嗨，我正在做一个画廊，在那里你有小拇指，每个人都选择主图像，如果你点击主图像，你应该得到一个叠加层，在那个叠加层里面是图片和一些额外的 html。

好的，我几乎在这里实现了 90% 的代码http://jsfiddle.net/s6TGs/5/

我只使用jquerytools ..问题是当你选择第二个拇指时......你得到的覆盖是拇指1的覆盖......即使我确实改变了相应的 (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();
    });
4

1 回答 1

0

好吧，至少我终于让它工作了..现在我只需要构建一个 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>
于 2013-05-29T22:19:53.880 回答