灯箱无法在（任何）浏览器上工作

Question

我看了一个关于简单灯箱的教程，我想弄清楚为什么它对我不起作用。我正在使用 http://lokeshdhakar.com/ 版的灯箱。

我不知道是什么问题。当我通过我正在使用的文本编辑器键入它时，它只会在新 window 中打开图像。但就在 code.io 中，它打开了它作为正确的灯箱。我对发生的事情感到很困惑。

这是我的代码。

<head>
<meta charset="utf-8">
<title> Fine Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="styles5.css" rel="stylesheet" type="text/css">
 <link href="css/lightbox.css" rel="stylesheet" type="text/css">

 <link href="fineart.css" rel="stylesheet" type="text/css">
 <link href="https://fonts.googleapis.com/css?    
family=Roboto:400,100,400italic,500,900,300,500italic,900italic"  
rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lightbox.min.js"></script>


</head>
<body>

<h1 class="fineart"> B &amp; W Photo </h1>
  <div id="page"><!--beginning of sidebar-->
<div id="sidebar">
    <div><a href="index.html"><img id="logo" src="img/logo.png"/></a>  
</div>
    <div>
    <ul class="sb">
        <li ><a href="index.html"> Home</a> </li>
        <li ><a href="about.html"> About</a> </li>
        <li ><a  href="works.html"> Works</a> </li>
        <li ><a  href="resume.html"> Resume</a> </li>
     </ul>
    </div>


    <div id="sidebar-btn">
        <span></span>
        <span></span>
        <span></span>
    </div>

    </div>




    <script  
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>

<script>

$(document).ready(function(){
    $('#sidebar-btn').click(function(){
        $('#sidebar').toggleClass('visible');
    });

});

</script>

</div><!--end of sidebar-->

<div class="container-a4">
    <ul class="caption-style-4">
        <li>
            <img src="http://i68.tinypic.com/2re64y0.jpg" alt="blur">
            <div class="caption">
                <div class="blur"></div>
                <div class="caption-text">
                  <h1><a href="http://i63.tinypic.com/9lhaj9.jpg" data- 
lightbox="photos">Blur</a></h1>
                  <p> Photo Series </p>
                </div>

            </div>
        </li>
    </ul>
    </div>
</body>
</html>

（这是剩下的） http://codepen.io/kasiariele/pen/jbjVgr

就像我说的，我不确定为什么它在站点编辑器中工作，但是当我保存并刷新到浏览器时，它会在新页面而不是灯箱上打开图像。请帮忙！

Answer 1

您需要正确订购 javascript 库。

您正在加载 lightbox.min.js 在加载 jquery.min.js 之前（这取决于您使用灯箱的方式）。

这里直接引用了lightbox website。

If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.

你也应该load all of your scripts together right before your </body> closing tag，像这样：

<script  
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/lightbox.min.js"></script>
<script>
    $(document).ready(function(){
        $('#sidebar-btn').click(function(){
            $('#sidebar').toggleClass('visible');
        });
    });
</script>

灯箱无法在（任何）浏览器上工作

Lightbox Not Working Onto (Any)Browser

javascript

google-chrome

lightbox