jQuery 灯箱，启动问题

Question

所以我试图让以下灯箱在我的网站上工作：-

http://www.jqueryscript.net/lightbox/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin.html

这是我的开发站点：dev.blupace.com

我有一个 id 为 hgallery 的测试图库 .gallery 这是使用

隐藏的

#hgal{
display: none;
}

我已加载样式表

<link rel="stylesheet" href="css/simplelightbox/simplelightbox.min.css">

和jQuery

之后加载的JS

   <!-- JQuery -->
<script src="js/jquery.min.js"></script>

<!-- bootstrap JS -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- custom JS -->
<script src="js/custom.js"></script>

<!-- Light Gallery -->
<script src="js/simplelightbox/simple-lightbox.min.js"></script>

在我的自定义 JS 中，我有以下代码：-

var lightbox= $('.gallery a').simpleLightbox();

$('.btn-fashion').click(function(e){
    e.preventDefault();
    lightbox.open($('.gallery a:first'));
});

单击 .btn-fashion 应启动灯箱并打开测试图库

问题是我无法让它工作，似乎灯箱没有启动。因此，我们将不胜感激任何帮助。

亲切的问候，

Answer 1

由于在灯箱脚本 loaded.You 之前加载 custom.js，您正试图在加载灯箱之前启动灯箱如果您使用 [=19]，还需要加载 tether.js =] 4.

像这样重新排列脚本（并添加 tether.js）：

 <!-- JQuery -->
 <script src="js/jquery.min.js"></script>

  <!-- Tether -->
  <script>   src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>

<!-- bootstrap JS -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- Light Gallery -->
<script src="js/simplelightbox/simple-lightbox.min.js"></script>

<!-- custom JS -->
<script src="js/custom.js"></script>

jQuery 灯箱，启动问题

jQuery lightbox, problems initiating

javascript

css

jquery

lightbox