Question

我在一个简单的灯箱上观看了一个教程，我试图弄清楚它为什么不适合我。我正在使用灯箱的http://lokeshdhakar.com/版本。

我不知道问题是什么。当我通过文本编辑器输入它时，我正在使用它只是在新窗口中打开图像。但是刚才在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的直接引用。

如果您已在页面上使用jQuery，请确保在 lightbox.js之前加载。需要jQuery 1.7或更高版本。

你也应该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>

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

1 个答案: