图库:只有一个图像作为缩略图

时间:2014-12-21 10:49:54

标签: javascript gallery lightbox

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


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

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

我们希望有几个画廊(现场图片/录制/杂项。这样的东西)。 每个图库中只有一张图片应显示为缩略图。我们的网站管理员"发现使用灯箱难以实现。所以我要求你提供替代方案。您是否知道任何脚本/脚本技术,默认情况下只显示每个图库的一张图片作为缩略图或者原始代码的修改很容易?

1 个答案:

答案 0 :(得分: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>

然后,您可以将其他图像添加为锚标记,将其留空以便不显示。

如果您对使用空锚标记感到不满意,可以使用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