在我看來，這一切都是由js文件的衝突造成的。其中我仍然無法完全解決。需要LightBox2與我的懸停動畫一起工作
本來我的問題是，我想整合一個.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>
然後我修改我的styles.css的主題皮膚css文件夾編輯行1987年中增加高度和溢出屬性：
.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>
仍然沒有懸停動畫。根據查看源代碼，這個靜態塊永遠不會被放置在任何地方的頁面上。我從靜態塊移動的腳本，並把它放在系統 - >配置 - >設計 - >其他腳本（這將包括頭在頁面HTML結束標記之前。）：
<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到與我的懸停動畫一起工作。