在我看来，这一切都是由js文件冲突引起的。我仍然无法完全解决这个问题。
在此处查看网站
最初我的问题是，我想集成一个.hooper类的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-静态块默认模板。当我将小部件移动到不同的位置(如Main Content Area)时，更新了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>
仍然没有悬停动画。根据视图来源，这个静态块从未被放置在页面上的任何位置。我将脚本从一个静态块中移走，并将其放置在系统->配置->设计->杂项脚本中(这将包含在页面HTML的head closing标记之前。)：
<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与我的悬停动画一起工作的建议。
我检查了您的代码，问题似乎是缺少jQuery No冲突变量。
因此，只需使用完整的jQuery格式如下：
jQuery(document).ready(function() {
jQuery(".short-description").hover(
//on mouseover
function() {
jQuery(this).animate({
height: '+=250px' //adds 250px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
jQuery(this).animate({
height: '-=250px' //substracts 250px
}, 'slow'
);
}
);
});
不要忘记具有"简短描述"类的div的CSS样式：
.product-view .product-shop .short-description {
height: 100px;
margin: 10px 0;
overflow: hidden;
}
祝福。