仅加载单击的图像

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

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

$("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>

您甚至可以删除第二个“a href”和图像，然后动态创建它。这完全取决于您的灯箱库的工作方式以及您的需求。

Answer 2

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

<script>
$("a.galimg").click(function() {
        $(this).attr("data-src", "your desired data attribute");
    })
});
</script>

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