Uncaught：$(.).lightGallery不是函数

Question

当我尝试单击该链接时，它在浏览器控制台中显示如下：

Uncaught TypeError: $(...).lightGallery is not a    function(anonymous function) @ index.html:250dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3

这是我使用的代码：

    $('#gallery').on('click', function() {
    $(this).lightGallery({
        dynamic: true,
        dynamicEl: [{
            "src": 'assets/images/gallery/1.jpg',
            'thumb': 'assets/images/gallery/thumbs/1.jpg',
            'subHtml': '<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>'
        }, {
            'src': 'assets/images/gallery/2.jpg',
            'thumb': 'assets/images/gallery/thumbs/2.jpg',
            'subHtml': "<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>"
        }, {
            'src': 'assets/images/gallery/3.jpg',
            'thumb': 'assets/images/gallery/thumbs/3.jpg',
            'subHtml': "<h4>Coniston Calmness</h4><p>Beautiful morning</p>"
        }]
    })
});

记住，我在lightGallery中使用的是动态模式。

1. 我已经包括了之前的lightGallery库和之前的jQuery库。
2. 我试着用jQuery代替$。
3. 我也尝试了“分号解决方案”，但没有运气。

这是我包括的所有图书馆：

    <script src="assets/web/assets/jquery/jquery.min.js"></script>
  <script src="assets/tether/tether.min.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>
  <script src="assets/smooth-scroll/SmoothScroll.js"></script>
  <script src="assets/viewportChecker/jquery.viewportchecker.js"></script>
  <script src="assets/cookies-alert-plugin/cookies-alert-core.js"></script>
  <script src="assets/cookies-alert-plugin/cookies-alert-script.js"></script>
  <script src="assets/dropdown/js/script.min.js"></script>
  <script src="assets/touchSwipe/jquery.touchSwipe.min.js"></script>
  <script src="assets/jarallax/jarallax.js"></script>
  <script src="assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js"></script>
  <script src="assets/jquery-mb-ytplayer/jquery.mb.YTPlayer.min.js"></script>
  <script src="assets/theme/js/script.js"></script>
  <script src="assets/mobirise-slider-video/script.js"></script>
  <script src="assets/formoid/formoid.min.js"></script>
  <!-- lightgallery -->
  <script src="assets/theme/js/lightgallery.min.js"></script>
  <script src="assets/theme/js/lg-thumbnail.min.js"></script>
  <script src="assets/theme/js/lg-fullscreen.min.js"></script>
  <script src="assets/theme/js/lg-share.min.js"></script>
  <script src="assets/theme/js/lg-zoom.min.js"></script>
  <script src="assets/theme/js/lg-autoplay.min.js"></script>

Answer 1

我终于解决了这个问题，问题可能是我有了本地版本！！当我切换到cdnjs版本时，它工作得非常完美！非常感谢你们所有人！！我所做的就是用cdn链接替换本地链接。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.2/css/lightgallery.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.2/js/lightgallery.js"></script>

Answer 2

打中头部

<link href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css" rel="stylesheet">

你的html。

<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
</div>

在身体里。在jquery之后

<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script>
   lightGallery(document.getElementById('lightgallery'));
</script>

Answer 3

我确信，这个插件是最后一个被调用的脚本。我还在ready函数中包装了代码。

此外，我还展示了如何使用变体从DOM中选择元素。我正在使用jQuery，并在本地服务器上运行所有这些。光线库的来源是2018年，从存储库中手工下载。

<script  type="text/javascript">
      $(document).ready(function() {
        $('.post img').wrap(function(){
          return "<div class='gallery' data-src='" + $( this ).attr("src") + "'></div>";
        });

        lightGallery(document.querySelector('.post'), {selector: ".gallery"});
      });
    </script>