Question

我已经下载了最新版lightbox2的脚本。我已经将.js文件以及.css文件添加到我的head标签中。我已经在我的代码中使用了新属性来获取图像，并且我确保所有文件都在他们应该使用的文件夹中。但是，当你点击缩略图时，我无法获得功能。弹出较大的图像。

请帮忙。这是我的头脑：

 <head>
        <meta charset="UTF-8" />
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Amatic+SC' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" HREF="index.css" />
        <link href="css/lighbox.css" rel="stylesheet" />

        <title>
        Welcome! | DaveAyotte.com
        </title>
    </head>

这是我正在展示图片的部分：

<div class="photobox">
            <a href="img/img1.jpg" data-lightbox="photos"><img src="img/img1thumb.jpg" /></a>
            <a href="img/img2.jpg" data-lightbox="photos"><img src="img/img2thumb.jpg" /></a>
            <a href="img/img3.jpg" data-lightbox="photos"><img src="img/img3thumb.jpg" /></a>
            <a href="img/img4.jpg" data-lightbox="photos"><img src="img/img4thumb.jpg" /></a>
            <a href="img/img5.jpg" data-lightbox="photos"><img src="img/img5thumb.jpg" /></a>
        </div>

编辑：我实际上只是注意到它并没有像我们想要的那样创建一个弹出窗口，而是在我的网站的主要div之外打开图片（用于保存统一大小的所有内容），创建一个需要的滚动条向下滚动很长一段时间来查看点击的图像。

Answer 1

请检查lightbox.css文件以查看其是否正确链接，并在lightbox.css的链接标记中添加type属性

您需要在锚标记下添加rel属性，如此

<a href="color lef.jpg" data-type="album" rel="lightbox" >
    <img src="color lef.jpg" width="100" height="100" />
</a>

Answer 2

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

应该是

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

＆＃39>灯光中有拼写错误。您的原始代码缺少“＆＃39;＃”;

LightBox2 2.7.1弹出不起作用

2 个答案: