圖庫：僅一張圖像作為縮略圖

Question

這是鏈接： http : //lomakincello.net/etu/sehen.php

---

我正在使用HTML和CSS創建一個網站。 我對JavaScript不熟悉，因此有人在幫助我使用效果很好的HTML5 / Flash-Player和圖庫。

他試圖使用原始的燈箱。 默認情況下，所有屬於圖庫的圖片都顯示為縮略圖。

我們想要幾個畫廊（現場圖片/錄制會話/其他。類似的東西）。 每個畫廊的圖片只能顯示為縮略圖 。 我們的“網站管理員”發現使用燈箱很難做到。 所以我想請您替代。 您是否知道任何腳本/腳本技術，這些腳本/腳本技術默認情況下僅將每個畫廊的一張圖片顯示為縮略圖，或者在其中容易進行原始代碼的修改？

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>

然后，您可以將其他圖像添加為錨標記，將其保留為空白，以使其不顯示。

如果您對使用空的錨標簽不滿意，可以使用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屬性，使它們作為同一節目的一部分出現。

這是一個演示 。