如何同时引入lightbox与easyPaginate JS库并运行？是否可行？

云原生阿岚

2026-5-14

解决easyPaginate和Lightbox2无法同时运行的问题

这个问题的核心原因是重复引入了jQuery，导致先加载的插件被覆盖，只能生效最后加载的那个插件。让我们一步步解决：

问题分析

你提到已经在<head>中引入了jQuery，但在页面底部又再次引入了jquery-latest.js。当jQuery被重复加载时，它会重置全局的$和jQuery对象——这意味着先加载的插件（比如先放的lightbox.js）会因为jQuery对象被替换而失去绑定，自然无法生效；反之把lightbox移到最后，它就会绑定到新的jQuery对象上，而easyPaginate则失效。

解决方案

1. 移除重复的jQuery引入

删掉页面底部的<script src="http://code.jquery.com/jquery-latest.js"></script>，只保留<head>里的那一份jQuery引用。

2. 确保初始化代码在DOM就绪后执行

虽然有些插件会自动处理DOM加载，但显式把初始化代码放在$(document).ready()中，能避免DOM元素还没加载完成就执行脚本的问题，确保两个插件都能正确绑定到对应的元素上。

修改后的底部代码示例

<script src="lightbox.js"></script>
<script src="jquery.easyPaginate.js"></script>
<script>
$(document).ready(function() {
    // 初始化easyPaginate
    $('#easyPaginate').easyPaginate({
        paginateElement: 'img',
        elementsPerPage: 8,
        effect: 'climb'
    });
    // Lightbox2会自动初始化，若需自定义配置可在此添加
    // 比如：lightbox.option({ 'resizeDuration': 200 });
});
</script>