html - 灯箱不适用于子目录

Question

总的来说，我对 bootstrap 比较陌生。我目前正在一个网站上工作。在主站点上，灯箱有效。当我把它放在一个子目录中时，它就停止工作了。

我的目录结构如下。

公开
- CSS
- 图片
- 其他 php 文件
- 二级站点
+ CSS
+ 图片
+ 其他 php 文件

如果我将任何文件从 PUBLIC 主站点(bootstrap 工作的地方)移动到 SECONDARY SITE 灯箱将停止工作。

每当我做相反的事情时，从 SECONDARY SITE 到 PUBLIC main，它突然就起作用了。

我几乎在两个站点上使用相同的代码。我确保链接指向正确的站点。

这是我的定义。

<link rel="stylesheet" href="css/defined.css">
<link href="css/ekko-lightbox.css" rel="stylesheet">
<link href="css/ekko-lightbox.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="css/ekko-lightbox.js"></script>
<script src="css/ekko-lightbox.min.js"></script>
<script type="text/javascript">
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});

<div class="container-fluid">
<div class="row">
  <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12" align="center"><a href="images/tm_application_swatches/tm01.jpg" data-title="IMAGE NAME" data-toggle="lightbox"><img class="thumbnail" height="250" style="display:inline" src="images/tm_application_swatches/tm01.jpg"></a><p></p></div>
</div>
</div>

它在 Chrome 的开发者工具上捕获了这个。

Uncaught TypeError: this.lightbox_body.htmll is not a function
    at b.showLoading (ekko-lightbox.min.js:7)
    at new b (ekko-lightbox.min.js:7)
    at HTMLAnchorElement.<anonymous> (ekko-lightbox.min.js:7)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.a.fn.ekkoLightbox (ekko-lightbox.min.js:7)
    at HTMLAnchorElement.<anonymous> (tm_swatch.php:22)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.q.handle (jquery.min.js:3)

我没有想法，非常感谢您的帮助。

Answer 1

你正在使用像 href="css.. 这样的相对链接，但很可能你需要有根相对链接，像 href="/css