时间戳

首页 > 解决方案 > 如何在代码中同时包含 lightbox 和 easyPaginate Javascript 库？（甚至可能吗？）

javascript - 如何在代码中同时包含 lightbox 和 easyPaginate Javascript 库？（甚至可能吗？）

问题描述

我想在我的代码中包含这两个 JS 库并让它们同时运行。

http://st3ph.github.io/jquery.easyPaginate/ https://lokeshdhakar.com/projects/lightbox2/

这两个网站都提供了有关如何使用这些库的信息。

我尝试设置两个库，但一次只能运行一个。

这是我在下面的 index.php 页面底部包含的代码（index.php 是我想要使用这两个库的唯一页面） -

<script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="lightbox.js"></script>
    <script src="jquery.easyPaginate.js"></script>
     <script>
          $('#easyPaginate').easyPaginate({
        paginateElement: 'img',
        elementsPerPage: 8,
        effect: 'climb'
    });
  </script>

使用此代码，只有灯箱库有效。如果我要将灯箱脚本移到最底部，那么只有 easyPaginate 库可以工作。

如何让两个库同时工作？这甚至可能吗？

我的代码 - 阅读下面的“从这里阅读”评论。https://pastebin.com/m0jA9QYp

我已经在头脑中调用了 jquery 脚本。

标签： javascripthtmlpaginationlightboxlightbox2

解决方案

是的，这是可能的——在一个文件中包含一个或多个库。你可以这样做：

在 html 文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

        <script src="lightbox.js"></script>
        <script src="jquery.easyPaginate.js"></script>

</body>
</html>

好的，但我仍然在页面上看到这个：

https://pastebin.com/m0jA9QYp：

  <script src="lightbox.js"></script>
    <script src="jquery.easyPaginate.js"></script>
    <script src="jquery.easyPaginate.js"></script>
     <script>
          $('#easyPaginate').easyPaginate({
        paginateElement: 'img',
        elementsPerPage: 8,
        effect: 'climb'
    });
  </script>

所以如果你试试这个：

</center> 
     <script>
          $('#easyPaginate').easyPaginate({
        paginateElement: 'img',
        elementsPerPage: 8,
        effect: 'climb'
    });
  </script>
<script src="lightbox.js"></script>
<script src="jquery.easyPaginate.js"></script>

</body>

推荐阅读