Question

我正在尝试将lightbox集成到我的网站上，但我似乎无法弄清楚出了什么问题。我知道我的css和js文件是正确的，因为当我复制index.html文件时，它会起作用，但当我尝试使用自己的文件时，它不会出于某种原因。< / p>

请原谅此网站的音乐和俗气 这是网站[link] [1]

这是前4张图片。我完全复制了这个例子？这是我的index.html文件，仅适用于图库部分。

<article id="gallery" class="panel">
    <header>
        <center>
            <h2>Gallery</h2>
        </center>
        <div class="image-row">
            <div class="image-set"> 
                <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
                <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
                <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
                <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
            </div>
        </div>
        <div class="image-row">
        ...

Answer 1

您没有加载Lightbox CSS。将其添加到您的页面头：

<link rel="stylesheet" href="css/lightbox.css"></link>

可能还需要图像文件或其他资源才能让Lightbox看起来正确。

此外，删除两个jQuery调用之一。即使它没有破坏（很少见），您也不希望访问者无缘无故地下载两个大型库文件。

Lightbox在我的网站上不起作用

1 个答案: