Wordpress の無限スクロール プラグインを、石積みを使用しているテーマに統合する際に厄介な問題に直面しています。
私は無限スクロールの最新バージョン 2.6.2 を使用しており、プラグインのコールバック セクションに次のコードを追加しました。
// hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
しかし、それは機能していません。新しい要素に不透明度を追加しますが、位置などを追加していないため、完全には機能しません。新しいアイテムは、古い製品の上にページの上部に表示されます。
スクリプトは次のようになります。
/* <![CDATA[ /
var infinite_scroll = "{\"loading\":{\"msgText\":\"Loading...<\\/em>\",\"finishedMsg\":\"No additional products.<\\/em>\",\"img\":\"http:\\/\\/www.test.com\\\/wp-content\\\/plugins\\\/infinite-scroll\\\/img\\\/ajax-loader.gif\"},\"nextSelector\":\".next\",\"navSelector\":\".woo-pagination\",\"itemSelector\":\"li.product\",\"contentSelector\":\"ul.products\",\"debug\":false,\"behavior\":\"\",\"callback\":\"\\\/\\\/ hide new items while they are loading\r\nvar $newElems = jQuery(newElements).css({ opacity: 0 });\r\n\\/\\/ ensure that images load before adding to masonry layout\r\n$newElems.imagesLoaded(function(){\r\n\\/\\/ show elems now they're ready\r\n$newElems.animate({ opacity: 1 });\r\n$container.masonry( 'appended', $newElems, true );\r\n});\"}";
/ ]]> */
石積みは次のようになります。
// Only fire masonry if the window is an appropriate size and images are loaded
jQuery(function(){
var $container = jQuery('ul.products');
$container.imagesLoaded( function(){
if (jQuery(window).width() > 767) {
$container.masonry({
itemSelector : 'li.product',
columnWidth : 295,
isFitWidth: true,
gutterWidth : 2
});
}
});
});