Question

我的网站上有一个CSS灯箱库，但是它同时加载了缩略图和大图像。

以下是我各种文件的内容;

HTML：

<div class=galerie>
<a href="#img1" class=galimg><img src=/images/thumbnail.jpg /></a><a href="#_" class=lightbox id="img1"><img data-src="/images/large-image.jpg"></a>
<a href="#img2" class=galimg><img src=/images/thumbnail.jpg /></a><a href="#_" class=lightbox id="img2"><img data-src="/images/large-image.jpg"></a>
<a href="#img3" class=galimg><img src=/images/thumbnail.jpg /></a><a href="#_" class=lightbox id="img3"><img data-src="/images/large-image.jpg"></a>
<a href="#img4" class=galimg><img src=/images/thumbnail.jpg /></a><a href="#_" class=lightbox id="img4"><img data-src="/images/large-image.jpg"></a>
</div>

CSS：

.lightbox{display:none;position:fixed;z-index:10001;width:100%;height:100%;text-align:center;top:0;left:0;background:black;background:rgba(0,0,0,0.8)}
.lightbox img{max-width:100%;max-height:100%}
.lightbox:target{display:block;outline:none}

我添加了一个脚本（jQuery）：

<script>
    $("a.galimg").click(function() {
        $(".lightbox").each(function() {
            $(this).find("img").attr("src", $(this).find("img").attr("data-src"));
        });
    });
</script>

现在只有点击缩略图后才能加载大文件。

问题是它们一次全部加载，我只希望一次加载点击的一个。

有办法做到这一点吗？

我知道每个函数都这样做，我还可以使用其他函数吗？

Answer 1

Attr设置了一个属性，如果你试图使用它，我会选择这样的东西。我不确定你要将属性设置为什么，但这是语法：

margin-bottom: -10px

http://www.w3schools.com/jquery/html_attr.asp

Answer 2

我不确定您为什么要这样做（如果您发布指向您网站的链接会更容易），但我会尝试提供帮助。只是不要使用＆＃39;每个＆＃39;功能。所以你的代码应该是这样的：

$("a.galimg").click(function() {
    var imgID = $(this).attr('href');
    $(imgID).attr("src", $(this).data('srcbig'));
});

对于HTML：

<div class=galerie>
    <a href="#img1" class="galimg" data-srcbig="/images/big-img-1.jpg"><img src=/images/thumbnail.jpg /></a><a href="#_" class=lightbox id="img1"><img src="" alt="remember about me"></a>
</div>

你甚至可以删除第二个＆＃39; a href＆＃39;和图像，只是动态创建它。这一切都取决于您的灯箱库如何工作以及您需要什么。

仅加载点击的图像

2 个答案: