Question

我想使用bootstrap灯箱我从这里使用灯箱http://www.jasonbutz.info/bootstrap-lightbox/但是我收到错误

＆＃34; bootstrap-lightbox.min.js：6未捕获TypeError：无法读取属性＆＃39;构造＆＃39;未定义＆＃34;

我该如何解决这个问题？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="asset/lightbox/bootstrap-lightbox.min.css" type="text/css">    
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="asset/lightbox/bootstrap-lightbox.min.js"></script>
    <a id='myLightbox' class='lightbox hide fade'  tabindex='-1' role='dialog' aria-hidden='true'>
         <a class='lightbox-content'>
            <img src='$resim' class='img-responsive' style='min-width:230px; height:190px;' >
            <div class='lightbox-caption'></div>
            <a href='$page_url' target='_blank'><img style='width:100%; height:50px;' src='$img_url'></a>
        </a>
    </a>

Answer 1

您包含以下内容：

Bootstrap CSS
Bootstrap Lightbox CSS
的jQuery
Bootstrap Lightbox JavaScript

但是你没有包含Bootstrap Javascript（应该在Bootstrap Lightbox之前完成）。

例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

如果您需要更多信息，this page可以为您提供帮助。

一个工作示例是以下代码：

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="asset/lightbox/bootstrap-lightbox.min.css" type="text/css">
  </head>
  <body>
    <a data-toggle="lightbox" href="#demoLightbox">
      <img src='so-icon.png' class='img-responsive' style='min-width:230px; height:190px;' >
    </a>

    <div id="demoLightbox" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class='lightbox-dialog'>
            <div class='lightbox-content'>
                <img src="so-icon.png">
                <div class='lightbox-caption'></div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://adresinden.com/mobile/asset/lightbox/bootstrap-lightbox.min.js"></script>
  </body>
</html>

请注意，此项目不再维护，并且无法使用Bootstrap 3.3.6开箱即用。我在示例中使用了Bootstrap 2。

另一种可能性是您的页面中未定义$resim，$page_url或$img_url之一。

Bootstrap灯箱错误

1 个答案: