jQuery Lightbox2无法正常工作

时间:2015-12-10 06:19:36

标签: jquery lightbox lightbox2

我不知道为什么LightBox不工作。当我点击图片时,它会转到页面的链接,而不是拥有"灯箱"淡入显示图像。我console.logged,我没有收到任何错误消息。

        P画廊|查看投资组合

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="dist/css/lightbox.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/script.js"></script>
    <script src="dist/js/lightbox.js"></script>

</head>


        <section>
            <div class="container">
                <h1 id="heading">All Projects</h1>
                <ul id="gallery">
                    <li class="design" ><a href="img/web1.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web1.jpg"></a></li>
                    <li class="programming" ><a href="img/web2.jpg" data-lightbox="example-set"  data-title="Project 1" data-desc="abc"><img src="img/web2.jpg"></a></li>
                    <li class="cms" ><a href="img/web3.jpg" data-lightbox="example-set"  data-title="Project 1" data-desc="abc"><img src="img/web3.jpg"></a></li>
                    <li class="cms" ><a href="img/web4.jpg" data-lightbox="example-set"  data-title="Project 1" data-desc="abc"><img src="img/web4.jpg"></a></li>
                    <li class="design cms programming" ><a href="img/web5.jpg" data-lightbox="example-set"  data-title="Project 1" data-desc="abc"><img src="img/web5.jpg"></a></li>
                    <li class="design cms programming" ><a href="img/web6.jpg" data-lightbox="example-set"  data-title="Project 1" data-desc="abc"><img src="img/web6.jpg"></a></li>
                </ul>
            </div>
        </section>

3 个答案:

答案 0 :(得分:12)

将lightbox javascript文件加载到body标记的末尾。为我工作。显然,灯箱需要DOM准备解析图像/链接。

答案 1 :(得分:2)

您可以在页面加载时启动灯箱:

{{1}}

答案 2 :(得分:0)

此问题是由于jquery的依赖及其正确版本引起的。

在我的情况下,我在主体底部的jquery和其他js文件之前加载lightbox-plus-jquery.min.js。 jsut工作正常。