先日、クリック可能なサイズ変更可能な画像を含むWordpress投稿にIsotopeを実装しようとして、問題に遭遇しました。
このデモ「http://jsfiddle.net/desandro/zhbLL/3/embedded/result,js,css,html,resources/」を使用して再構築しました。必要なすべてのファイルを含む通常の HTML ファイルで正常に動作し、 css ですが、wordpress の投稿に適用しようとすると機能しません。
デモと同じように画像のサイズ変更は正常に機能しますが、クリックすると画像が 2 回表示されるという唯一の違いがあります。もう 1 つの問題は、デバイス/ウィンドウ サイズを変更すると、Isotope アイテムが再レイアウトされないことです。
また、Div ID Container の CSS の "width:100%" の値により、すべての Isotope アイテムが消えます。
これは、Isotope 項目とそのコンテナーが Single.php ファイルの他のコンテナー内にネストされているという事実と関係があると思います。
何が原因なのかはわかりませんが、リンクしたフィドルの CSS を変更していないため、これらの問題の原因をテストするために、wordpress single.php の CSS を貼り付けます。
また、フィドル リンクの両方の .js ファイルが機能していることも確認しました。Isotope とカスタム .js スクリプトが読み込まれます。
単一投稿の CSS
.post-content-content {
float: left;
width: 100%;
margin-bottom: 40px;
padding-bottom: 30px;
}
#content-container {
height: auto;
min-height: 300px;
padding-bottom: 0px;
}
#content {
float: left;
height: auto;
min-height: 200px;
padding-left: 17px;
padding-right: 17px;
top:45px;
left:0;
right:0;
margin-right: 0px;
margin-left: 0px;
position:relative;
}