Question

我正在编辑一个模板，我需要添加一个Lightbox，在产品页面上显示一些HTML内容。确切地说，不是“添加到购物车”按钮，而是会有一个按钮弹出一些内联灯箱内容。

我看过的所有灯箱替代品都要求我使用CDN继承jQuery。像这样： <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

我正在使用的模板在head.phtml＆amp;中使用了一堆自定义脚本。其他页面。像：

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/ver_menu.js');?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/custommenu.js');?>"></script>

因此，当我在head.phtml甚至产品页面中添加此行时，我的热门菜单会停止下降＆amp;产品信息标签停止工作，所有信息都显示在我的产品页面上（而不是显示在各自的标签下）。

有没有办法可以避免jQuery脚本之间的这种干扰，使灯箱（产品页面 - view.phtml）工作，而不是我的菜单＆amp;信息标签受影响。

一段时间以来一直在努力争取主题，而主题作者也不愿意帮助。

我已经尝试过使用上面发布的jQuery Line的位置，但没有运气。我可以使用magento的核心jQuery脚本来使我的灯箱工作......

另外，我使用colorbox作为灯箱效果。（http://www.jacklmoore.com/colorbox）

我做不了多少但是我能提供晚餐和晚餐。我可以帮助我解决问题。真的指望你们......

Answer 1

我是这样做的，我在/templatefiolder/page/html/head.phtml中添加了这段代码：

 <!-- adding jQuery -->
<script type="text/javascript" src="http://linktoJquery/jquery.tools.min.js"></script>

<script type="text/javascript">
//<![CDATA[
     var $j = jQuery.noConflict();
//]]>
</script>

由于与原型的冲突，我添加了这个$ j。在这种情况下，你总是要做这样的jQuerythings：

<script>
// execute your scripts when DOM is ready. this is a good habit
$j(function() {     

    $j(".scrollable").scrollable();

});
</script>

Answer 2

不要在Magento网站上通过CDN使用jQuery。这会引起问题。而是将其托管在您的服务器上。打开脚本，然后添加：

jQuery.noConflict();

在文件的末尾。将它重命名为jquery.min.no-conflict.js，以便将来任何人都能在noConflict（）模式下运行，并确保在任何其他基于jQuery的脚本之前加载它。

由于你处于noConflict（）模式，你应该使用“jQuery”作为实例化器来构建任何jQuery脚本，而不是$（由Prototype使用，它是Magento 1.x中使用的javascript框架）。

Answer 3

您尝试过的灯箱是jQuery插件，需要jQuery库。如果您托管图书馆或让其他人托管它（如CDN）并不重要。如果您的页面已经运行了jQuery版本，则可能根本不需要添加任何内容。

如果你的页面正在使用其他一些使用$ alias的脚本，那么你需要使用noConflict，因为pspahn说。之后，您将无法再使用'$'作为jQuery的别名，而无需创建本地范围并在其中进行分配。例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>jQuery.noConflict();</script>
<script src='jquery.colorbox-min.js'></script>
<script>
  jQuery(document).ready(function(){
    var $ = jQuery; // create an alias for typing convenience
    $('a.example').colorbox();
  });
</script>

Magento Lightbox，Menu＆amp; amp;中的jQuery干扰标签

3 个答案: