在我看来，这一切都是由js文件冲突引起的。其中我仍然无法完全解决。
最初我的问题是我想集成一个 .hover 类 java 脚本动画来降低我的整体页面高度。自从：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#div1").hover(
//on mouseover
function() {
$(this).animate({
height: '+=250' //adds 250px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
$(this).animate({
height: '-=250px' //substracts 250px
}, 'slow'
);
}
);
});
</script>
<style type="text/css">
#div1{
height:50px;
overflow:hidden;
background: red; /* just for demo */
}
</style>
<body>
<div id="div1">This is div 1</div>
</body>
这似乎是实现此动画的最简单方法。所以我首先创建了一个静态块并放置了上面的修改版本。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".short-description").hover(
//on mouseover
function() {
$(this).animate({
height: '+=250' //adds 250px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
$(this).animate({
height: '-=250px' //substracts 250px
}, 'slow'
);
}
);
});
</script>
然后我在我的主题皮肤 css 文件夹编辑行 1987 中修改了 styles.css 以添加高度和溢出属性：
.product-view .product-shop .short-description { margin:10px 0; height:200px; overflow: hidden; }
此解决方案有效，但干扰了默认的 magento 图像查看器。在产品页面上，主要产品图像不会调整大小（缩放）以适合图像框。在决定实施 shadowbox 之前，我尝试了调整和修复。我从来没有能够实现 shadowbox，后来我更改为 LightBox2，因为 magentocommerce.com 上提供了该扩展，并带有评论说明 1.7.0.2 的功能。
我安装了我通过magento后端中的连接管理器直接从发布者那里收到的扩展下载，没有输出错误。有一段时间，LightBox2 运行良好，但在尝试了不同的建议修复后，例如在 page.xml 文件中放置以下行：
<action method="addItem">
<type>skin_js</type>
<name>http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js</name>
</action>
它在刷新 css/js 缓存后停止工作，我在前端得到 WSOD / 空白屏幕，但在后端出现正常行为。在尝试了许多不同的修复后，问题似乎来自包含显示在的静态块的小部件 - 所有产品类型，所有产品，块参考 - 页面标题，CMS - 静态块默认模板。当我将小部件移动到其他位置（例如主要内容区域）时，更新 page.xml 以首先包含此行：
<action method="addJs"><script>lib/jquery.min.js</script></action>
将 .js 文件放在本地，然后刷新块布局缓存，前端恢复活力。
我将静态块更新为：
<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
// ]]></script>
<script type="text/javascript" src="/js/lib/jquery.min.js">// <![CDATA[
$j(document).ready(function() {
$j(".short-description").hover(
//on mouseover
function() {
$j(this).animate({
height: '+=300' //adds 300px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
$j(this).animate({
height: '-=300px' //subtracts 300px
}, 'slow'
);
}
);
});
// ]]></script>
仍然没有悬停动画。根据查看源代码，这个静态块从未被放置在页面上的任何地方。我将脚本从静态块中移出，并将其放置在 System -> Configuration -> Design -> Miscellaneous Scripts 中（这将包含在页面 HTML 中的 head 结束标记之前。）：
<script type="text/javascript" src="http://foryourrestroom.com/js/lib/jquery.min.js">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(".short-description").hover(
//on mouseover
function() {
$j(this).animate({
height: '+=250px' //adds 250px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
$j(this).animate({
height: '-=250px' //substracts 250px
}, 'slow'
);
}
);
});
</script>
该脚本现在加载到页面上，并且可以从视图源中看到，但与主页上的滑块冲突。现在我没有工作的 LightBox2 也没有动画。
根据查看源代码，这是 LightBox2 的脚本：
<script type="text/javascript">
//<![CDATA[
jQuery('.ig_lightbox2').fancybox({"padding":10,"margin":20,"opacity":0,"modal":0,"cyclic":1,"autoScale":1,"centerOnScroll":1,"hideOnOverlayClick":1,"hideOnContentClick":0,"overlayShow":1,"overlayOpacity":0.3,"overlayColor":"#333333","titleShow":1,"titlePosition":"float","transitionIn":"fade","transitionOut":"fade","speedIn":300,"speedOut":300,"changeSpeed":300,"changeFade":"fast","easingIn":"swing","easingOut":"swing","showCloseButton":1,"showNavArrows":1,"enableEscapeButton":1});
//]]>
</script>
这是根据查看源的悬停动画的脚本：
<script type="text/javascript" src="http://foryourrestroom.com/js/lib/jquery.min.js">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(".short-description").hover(
//on mouseover
function() {
$j(this).animate({
height: '+=250px' //adds 250px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
$j(this).animate({
height: '-=250px' //substracts 250px
}, 'slow'
);
}
);
});
</script></head>
非常感谢任何让 LightBox2 与我的悬停动画一起工作的建议。