それはすべて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 画像ビューアーに干渉しました。製品ページで、メインの製品画像が画像ボックスに収まるようにサイズ変更 (ズーム) されませんでした。シャドーボックスの実装を決定する前に、微調整と修正を試みました。私はシャドウボックスを実装することができませんでしたが、1.7.0.2 の機能を示すレビューで拡張機能が magentocommerce.com で利用可能になったため、後で LightBox2 に変更しました。
出力エラーなしで、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 の 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 をホバー アニメーションと一緒に動作させるための提案をいただければ幸いです。