javascript - 未捕获的 TypeError : $(. ..).ekkoLightbox 不是函数

标签 javascript jquery html wordpress twitter-bootstrap

我尝试在我的 WordPress 网站上使用 ekkolightbox,但每次我选择图像时都会收到响应。

Uncaught TypeError: $(...).ekkoLightbox is not a function

我的猜测是我没有通过 cdn 正确导入库,但我不太清楚我做错了什么。

这是我的代码的缩短版本。

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
  
</head>
<body>
  <div class="col-md-4">
    <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">
      <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
    </a>
  </div>
  
 <script type="text/javascript">
  jQuery(document).ready(function( $ ) {
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
                  //alert("clicked"); //to test this function ran
                  event.preventDefault();
                  $(this).ekkoLightbox();
              });
          });
  </script>
</body>

最佳答案

将 Bootstrap 4 用于 ekkoLightbox,请查看引用 here

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
  
</head>
<body>
  <div class="col-md-4">
    <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery">
      <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
    </a>
  </div>
  
 <script type="text/javascript">
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        //alert("clicked"); //to test this function ran
        event.preventDefault();
        $(this).ekkoLightbox();
    });
  </script>
</body>

关于javascript - 未捕获的 TypeError : $(. ..).ekkoLightbox 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58852604/

相关文章:

javascript - JQuery 代码语法问题? ("Inline control structures are not allowed")

javascript - 根据动态宽度更改进度条的类

javascript - 使用 JavaScript 的动态下拉菜单,无需使用数据库

javascript - 使用 formvalidation.io 成功启动 Bootstrap 模式

javascript - 在 X-Editable jQuery 库生成的 Textarea 字段上运行 Textarea Resizer jQuery 插件

asp.net - jquery 将字符串转换为 json 以发送到我的网络服务?

javascript - 我怎么能: Select a paragraph with JavaScript (on click)?

javascript - 创建多个容器并修改它们的 div

javascript - 任何验证磁力链接的方法(Javascript)

尽管留在范围内,Javascript 对象仍会丢失状态