JQuery 插件冲突 - 合并脚本而不发生冲突

Question

我已经搜索了High和Low以寻找解决方案，但无法弄清楚。我是一个javascript菜鸟，所以我提前为我的无知道歉。我非常感谢你能提供的任何帮助。

无论如何，我有两个jquery插件在一个页面上运行。一个是同位素，另一个是Fancybox。它们都可以单独工作，但可以一起工作，当单击图像并激活Fancybox时，图像不会自动调整大小以适应屏幕。有关插件的其他所有内容都可以正常工作。

我有这些.js脚本链接到：

https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
/js/jquery.isotope.js
/js/jquery.fancybox.js
/js/jquery.mousewheel-3.0.6.pack.js
/js/jquery.fancybox-buttons.js

然后在文档中遵循此脚本：

$(function(){
  var $container = $('#container');
  $container.isotope({
    itemSelector: '.project'
  });
});
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    padding : 0 ,
    minWidth : 215 ,
    maxWidth : 900 ,
    autoSize : true ,
});

我已经尝试了各种方法，例如no.conflict，但要么我做错了，要么不起作用。如果有人能就如何分离这些脚本提供一些建议，我将不胜感激。

提前谢谢。

Answer 1

好的

，我找到了解决方法。这有点奇怪，但是...无论什么。

我将文档内脚本分成两个单独的脚本，并将链接的.js文件移动到每个脚本上方。然后，我为每个 jquery 库添加了单独的调用。所以现在有两个对jquery的调用。它看起来像这样：

https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
/js/jquery.fancybox.js
/js/jquery.mousewheel-3.0.6.pack.js
/js/jquery.fancybox-buttons.js
$(".fancybox")
     .attr('rel', 'gallery')
     .fancybox({
        padding : 0 ,
        minWidth : 215 ,
        maxWidth : 900 ,
        autoSize : true ,
     });
https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
/js/jquery.isotope.js
$(function(){
   var $container = $('#container');
      $container.isotope({
      itemSelector: '.project'
  });    
});

我确定这并不理想，但它有效，所以我不太在乎。感谢Tim B James的帮助。