画廊:只有一张缩略图。

Question

这里有一个链接：http://lomakincello.net/etu/sehen.php

我正在创建一个使用HTML和CSS的网站。我不熟悉JavaScript，所以有人在帮我制作HTML5 5/Flash，它工作得很好，还有一个画廊。

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

我们希望有几个画廊(现场图片/录音会议/杂项。类似的事情)。每个图库只有一张图片应该显示为缩略图。我们的“站长”发现这很难用光盒实现。所以我请求你另一个选择。您是否熟悉任何脚本/脚本技术，在默认情况下只显示每个图库的一张图片作为缩略图，或者修改原始代码很容易？

Answer 1

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

您可以从CDN中包含jQuery：

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

您可以获得一个很好的lightbox脚本，在这里可以很容易地按照以下说明操作：http://lokeshdhakar.com/projects/lightbox2/

然后，要做的第一件事是把缩略图挂在灯箱中显示：

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

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

如果您不满意使用空锚标记，您可以使用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属性，使他们显示为同一节目的一部分。

这是一个演示。