Question

所以我试图在我的网站上运行以下灯箱： -

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

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

我有一个测试画廊.gallery，其ID为hgallery 这是使用

隐藏的

#hgal{
display: none;
}

我已加载styesheet

<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

由于在加载Lightbox脚本之前加载了custom.js，您试图在加载Lightbox之前尝试启动它。如果使用bootstrap 4，还需要加载tether.js。

重新排列这样的脚本（并添加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灯箱，启动问题

1 个答案: