Question

有一段时间我现在一直在为一个相当简单的网站工作。我想添加一个灯箱，因为我认为它适合设计，但我在这个过程中犯了一个错误。由于我选择使用黑白图像，我决定使用灰度功能。现在我用Lightbox查看的所有图像都是黑白的。

这是我使用的灯箱：

http://lokeshdhakar.com/projects/lightbox2/

这是我的一个小但非常重要的部分：

<a href="img/Baking-Lightbox.jpg" data-lightbox="Baking" img src="img/Baking.jpg" data-title="My caption">
    <img src="img/Baking.jpg">
</a>

任何人都可以告诉我我做错了什么

提前谢谢

Answer 1

根据您如何实施此灯箱并根据您放入HTML中的代码，您似乎错误地实施了灯箱。首先，在HTML的head标签内，确保包含CSS和javascript文件的链接，如下所示：

<head>
     <script src="js/jquery-1.11.0.min.js"></script>
     <script src="js/lightbox.min.js"></script>
     <link href="css/lightbox.css" rel="stylesheet" />
</head>

包含这些文件后，您应该只使用以下格式向您添加图像：

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

将“ img / image-1.jpg ”替换为图片的路径。
将“ image-1 ”替换为您要将图像组合在一起的任何名称。 确保您希望一起显示的所有图片都具有相同的值。
将“我的标题”替换为您希望在灯箱中显示为标题的内容。
将“图像＃1 ”替换为您希望在HTML中显示的内容。

您可以根据需要为每张图片添加任意数量的锚点（a）标记。

实施例

在以下示例中，我有两个灯箱组。一个将显示汽车，另一个将显示动物：

<a href="frog.jpg" data-lightbox="animals" data-title="A Frog">FROGS</a>
<a href="dog.jpg" data-lightbox="animals" data-title="A Dog">DOGS</a>
<a href="suv.jpg" data-lightbox="cars" data-title="An SUV">My SUV</a>
<a href="camry.jpg" data-lightbox="cars" data-title="A Camry">A Toyota Camry</a>

灯箱图像都是黑色和白色

1 个答案: