添加LightBox后Isotope筛选与Slick滑块失效问题求助

我给朋友的商业项目搭网站，刚接触jQuery。原本网站的轮播头部、两个Slick滑块、带Isotope筛选的作品集图库都正常运行，结果加了LightBox实现图库图片放大后，Isotope筛选和所有Slick滑块都失效了，只有轮播头部能用。报错信息：

Uncaught TypeError: a.indexOf is not a function at pa.fn.init.pa.fn.load (lightbox-plus-jquery.min.js:24) at functions.js:10

问题根源分析 #

这个报错和功能失效主要是两个原因：

1. jQuery重复加载冲突：你用的lightbox-plus-jquery.min.js自带了一个jQuery版本，会覆盖你之前引入的jquery-2.2.3.min.js。而Slick、Isotope这些插件都是挂载在第一个jQuery实例上的，被覆盖后自然就失效了。
2. load方法兼容性问题：如果LightBox带的是jQuery 3.x+版本，$(window).load()这个旧写法会被废弃，换成了$(window).on('load', ...)，这就导致functions.js第10行的代码报错，进而阻塞了后续脚本执行。

解决方案 #

1. 替换LightBox版本，避免重复加载jQuery #

把带jQuery的LightBox换成纯插件版本：

• 删掉<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script>
• 换成不带jQuery的<script type="text/javascript" src="js/lightbox.min.js"></script>（确保下载的纯插件版本和你原LightBox功能匹配）

2. 调整脚本加载顺序 #

插件要按「核心库→第三方插件→自定义脚本」的顺序加载，正确的顺序应该是这样：

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- 第三方插件先加载 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<!-- 然后加载LightBox纯插件 -->
<script type="text/javascript" src="js/lightbox.min.js"></script>
<!-- 最后加载自定义脚本 -->
<script src="contactform/contactform.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>

3. 修复functions.js里的load写法 #

为了兼容所有jQuery版本，把functions.js里的$(window).load(function(){...})改成$(window).on('load', function(){...})，修改后的代码片段：

// 修改后
$(window).on('load', function(){
  $('.main-nav li a, .servicelink').bind('click',function(event){
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top - 102
    }, 1500,'easeInOutExpo');
    if ($(window).width() < 768 ) {
      $('.main-nav').hide();
    }
    event.preventDefault();
  });
})

内容的提问来源于stack exchange，提问作者Luiza Silveira