灯箱图像都是黑白的

Lightbox images are all black and white

本文关键字：黑白 图像      更新时间：2023-09-26

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

这是我使用的灯箱：

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

这是我的html:中一个很小但非常重要的部分

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

有人能告诉我做错了什么吗

提前感谢

根据您如何实现这个灯箱，并根据您放入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>

一旦你包含了这些文件，你应该只使用以下格式将图像添加到HTML中：

<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>
相关文章：