灯箱图像全是黑白

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

这是我用的灯箱：

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>

有谁能够告诉我，我做错了什么

谢谢您提前

来源

2015-03-02 Robert Miller

_“这是我的一个小而非常重要的部分”__。请在这里发布，作为文本。此外，你“选择使用黑白图像”，它们是黑色和白色。那么你的问题是什么？ – blex 2015-03-02 18:17:14

@blex对此感到抱歉。 – 2015-03-02 18:25:50

@blex图像有颜色。我的意思是说，我添加了悬停效果，并且我使用灰度突出显示图像，同时将它们悬停在它们上面 – 2015-03-02 18:29:37

根据到如何实现这个灯箱，并根据您放入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使用图像添加以下格式ONLY：

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

替换 “IMG /图像1.JPG” 的路径，以你的形象。
替换“图片-1”与任何名称，你想分组您的图像一起。 确保您想要一起显示的任何图像具有相同的值。
将“我的标题”替换为您希望在灯箱中显示为标题的内容。
将“图片＃1”替换为您希望显示在HTML中的内容。

您可以为每个图像添加尽可能多的anchor（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>

来源

2015-03-02 18:26:59

灯箱图像全是黑白

回答

相关问题