Question

我搜索过高和低低解决方案，但无法解决这个问题。我是一个javascript noob，所以我提前为我的无知道歉。我非常感谢你能给予的任何帮助。

无论如何，我在页面上运行了两个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的帮助。

JQuery插件冲突 - 组合脚本没有冲突？

1 个答案: