如何在代码中同时包含lightbox和easyPaginate Javascript库？（这可能吗？）_Javascript_Html_Pagination_Lightbox_Lightbox2

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

javascript html pagination

如何在代码中同时包含lightbox和easyPaginate Javascript库？（这可能吗？）,javascript,html,pagination,lightbox,lightbox2,Javascript,Html,Pagination,Lightbox,Lightbox2,我想在代码中包含这两个JS库，并让它们同时运行这两个网站都提供了如何使用图书馆的信息我尝试设置两个库，但一次只能运行一个这是我在下面index.php页面底部包含的代码（index.php是我想使用这两个库的唯一页面）- $（'easyPaginate'）。easyPaginate({ paginateElement:'img'，元素页面：8，效果：“攀登” }); 使用此代码，只有lightbox库可以工作。如果我将lightbox脚本移到最底部，那么只有easyPagina

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

这两个网站都提供了如何使用图书馆的信息

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

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


$（'easyPaginate'）。easyPaginate({
paginateElement:'img'，
元素页面：8，
效果：“攀登”
});

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

如何使两个库同时工作？这可能吗

我的代码-阅读下面的“从这里阅读”注释

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

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

<div id="easyPaginate">
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
</div>

在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>


文件

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


$（'easyPaginate'）。easyPaginate({
paginateElement:'img'，
元素页面：8，
效果：“攀登”
});

因此，如果您尝试以下方法：

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

</body>


$（'easyPaginate'）。easyPaginate({
paginateElement:'img'，
元素页面：8，
效果：“攀登”
});

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

<div id="easyPaginate">
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
</div>

在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>


文件

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


$（'easyPaginate'）。easyPaginate({
paginateElement:'img'，
元素页面：8，
效果：“攀登”
});

因此，如果您尝试以下方法：

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

</body>


$（'easyPaginate'）。easyPaginate({
paginateElement:'img'，
元素页面：8，
效果：“攀登”
});

好的，我运行了您的代码，问题似乎是lightbox库正在用自己的一些内容替换

元素。这会导致轻松分页丢失对应该创建分页的“img”元素的引用。我试着用li包装

元素，使HTML如下所示：

<div id="easyPaginate">
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
</div>

另外，请尝试在easyPaginate之前包含lightbox脚本，因为我在将lightbox作为最后一个添加时遇到了一些问题。

好的，我运行了您的代码，问题似乎是lightbox库正在用自己的一些内容替换

元素。这会导致轻松分页丢失对应该创建分页的“img”元素的引用。我试着用li包装

元素，使HTML如下所示：

<div id="easyPaginate">
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
</div>

还可以尝试在easyPaginate之前包含lightbox脚本，因为我在将lightbox作为最后一个添加时遇到了一些问题。

我解决了这个问题。我制作了div元素，并将图像放在div元素中。在分页javascript文件中，我将类型从img更改为div。

我找到了答案。我制作了div元素，并将图像放在div元素中。在分页javascript文件中，我将类型从img更改为div。

是的，可能我们有一个处理分页逻辑的库，请参见此

从文档判断，两个库应该能够同时运行。你也可以发布你的HTML代码吗？也许您正在向#easyPaginate容器内的图像添加数据灯箱？那么这可能是一个问题，因为在easy paginate中有“img”元素选择为paginate元素。@WojciechDynus这是我的代码，很多代码都很混乱。一些对高层的评论是错误的。请阅读下面的评论，上面写着“从这里开始阅读”。我已经在标题中包含了jquery脚本，我知道我发布的pastebin链接有一个easyPaginate脚本的双重调用。我删除了一个脚本调用，但仍然得到相同的输出@WojciechDynus@niceCoderToThebest对我不能再评论了，因为评论线程太长了，你没有足够的XP让我们聊天。如果你想给我发电子邮件什么的，那太好了。否则，感谢您在此提供的帮助。根据文档判断，这两个库应该能够同时运行。你也可以发布你的HTML代码吗？也许您正在向#easyPaginate容器内的图像添加数据灯箱？那么这可能是一个问题，因为在easy paginate中有“img”元素选择为paginate元素。@WojciechDynus这是我的代码，很多代码都很混乱。一些对高层的评论是错误的。请阅读下面的评论，上面写着“从这里开始阅读”。我已经在标题中包含了jquery脚本，我知道我发布的pastebin链接有一个easyPaginate脚本的双重调用。我删除了一个脚本调用，但仍然得到相同的输出@WojciechDynus@niceCoderToThebest对我不能再评论了，因为评论线程太长了，你没有足够的XP让我们聊天。如果你想给我发电子邮件什么的，那太好了。否则，谢谢你的帮助，这就是我试图做的，但不幸的是，它没有工作。我在head标记中调用了jquery脚本，在body的底部调用了lightbox和paginate脚本（就在前面。只有lightbox库有效。Oke，但是如果您更改顺序？jquery.easyPaginate.js）“lightbox还是你一个接一个地测试了它？如果我改变了顺序，那么只有easyPaginate.js可以工作。如果你想看看@niceCoder或besthi，我已经用我的HTML代码更新了帖子，但是OK，我明白了