图像库与覆盖和html内部不能覆盖正确的图像.jquery

Image Gallery with Overlay and html inside cant overlay correct image. jquery

本文关键字：图像 覆盖 jquery 不能 html 内部      更新时间：2023-09-26

嗨，我在做一个图库，你有拇指，每个选择主图像，如果你选中主图像，你应该得到一个覆盖，覆盖里面是图片和一些额外的html。

我几乎完成了90%的代码http://jsfiddle.net/s6TGs/5/

我只是使用jquerytools…问题是当你选择第二个拇指…你得到的叠加是thumb1的叠加。即使我改变各自的(rel="#target")。所以我猜我做了什么或者错过了什么。

请有人向我解释一下，为什么即使在相应的rel, is更改后，触发器总是为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();
    });

好吧，至少我终于把它搞定了。现在我只需要建立一个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>
相关文章：