javascript - 图库:只有一张图像作为缩略图

Question

这是一个链接:http://lomakincello.net/etu/sehen.php

<小时/>

我正在使用 HTML 和 CSS 创建一个网站。我不熟悉 JavaScript，所以有人帮助我制作了一个运行良好的 HTML5/Flash 播放器和一个画廊。

他尝试使用原来的灯箱。默认情况下，属于图库的所有图片都显示为缩略图。

我们想要几个画廊(现场图片/录音 session /杂项。类似的东西)。 每个图库只能显示一张图片作为缩略图。我们的“网站管理员”发现使用灯箱很难实现这一点。所以我想问你一个替代方案。您是否知道默认情况下仅将每个图库的一张图片显示为缩略图的任何脚本/脚本技术，或者可以轻松修改原始代码？

Answer 1

首先，您使用的是 jQuery 1.2 和一个非常古老的灯箱脚本。我会更新这两个。

您可以包含来自 CDN 的 jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您可以在此处获得一个良好的灯箱脚本，其中包含易于遵循的说明: http://lokeshdhakar.com/projects/lightbox2/

然后，要做的第一件事就是连接缩略图以显示在灯箱中:

<a href="large-image1.jpg" data-lightbox="images">
  <img src="http://lomakincello.net/etu/pics/00kl.jpg">
</a>

然后，您可以将其他图像添加为 anchor 标记，将它们留空，这样它们就不会显示。

如果您不喜欢使用空 anchor 标记，可以使用 CSS 隐藏它们 (display: none)。

<a href="large-image1.jpg" data-lightbox="images">
  <img src="http://lomakincello.net/etu/pics/00kl.jpg">
</a>
<a href="large-image2.jpg" data-lightbox="images"></a>
<a href="large-image3.jpg" data-lightbox="images"></a>

这应该有效。

要认识到的重要一点是，为它们提供相同的 data-lightbox 属性，使它们显示为同一节目的一部分。

这是一个demo .