Lightbox2：CSS 设置为 display:none

Question

我正在尝试使用 Lightbox2，但是当我点击图片时它根本不起作用。

当我查看开发者控制台 (Chrome) 时，我可以看到叠加层和图像正在添加到 DOM，但它 display 属性设置为 none.

display:none

这是我的基本测试代码：

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">      
        <script src="Script/jquery.js"></script>
        <link href="Script/lightbox_dist/css/lightbox.css" rel="stylesheet">        
    </head>

    <body>
        <img src="Images/Gallery/27.jpg" data-lightbox="gallery" width="250"/>
        <script src="Script/lightbox_dist/js/lightbox.js"></script>
    </body>
</html>

Answer 1

您使用的标记是否正确？

<a class="example-image-link" href="images/image-1.jpg" data-lightbox="example-1" data-title="Optional caption.">
    <img class="example-image" src="images/thumb-1.jpg" alt="Two men in bicycle jerseys sitting outside at table having coffee">
</a>
<a class="example-image-link" href="images/image-2.jpg" data-lightbox="example-2" data-title="Optional caption.">
    <img class="example-image" src="images/thumb-2.jpg" alt="Two men in bicycle jerseys sitting outside at table having coffee">
</a>

Lightbox2：CSS 设置为 display:none

Lightbox2: CSS set to display:none

html

css

jquery

lightbox2