jQuery、 Masonryと Autopagerを併用する際の記述-不具合の解消

こんぬつは、ミート肉です。

昨今、サイトのWordPress化やマルチデバイス化は当たり前になってきてますね。そんな中便利なjqueryのライブラリがたくさんありますが、複数のライブラリを使うと変数とかがバッティングしたりとかで挙動がおかしくなったりします。
今回はグリッドデザインを自動でレイアウトしてくれるMasonryと、ページ遷移無しで次ページを読み込んでくれるautopagerを併用すると生じる不具合の解消法です。

ネットで調べるとMasonryとautopagerを併用すると、要素が重なって表示されたなりなどレイアウトが崩れて挙動がおかしくなると言う報告がたくさんあり、解消法が紹介されているのですが殆どが上手くいきませんでした。←
で、それでは困るので具体的にデバッグしながらちゃんと調査してみたのですよ。

前提として読み込む順番はjqueryMasonryautopagerです。
Masonryのダウンロード
jquery.autopagerのダウンロード
autopagerの公式ダウンロードサイトは閉鎖になってしまったので上記サイトからアーカイブをダウンロードします。
まずは基本記述

$(function(){
/*–masonryを有効にする*/
$(‘#grid-container’).masonry({//親要素を指定しmasonryを有効にする
itemSelector: ‘.hoge’//子要素をクラスで指定
});

/*–オートページャー設定制御–*/
/*–次ページ以降の記事一覧はボタンクリックで起動するように設定–*/
// 最大ページ数取得
var maxpage = max_num_pages; ?>;//WordPressで設定している最大表示数を呼び出して設定
$(‘#loading’).css(‘display’, ‘none’);//ローディング画像を設定

//autopagerを有効にする
$.autopager({
content: ‘.new-post’,// 読み込むコンテンツ
link: ‘#more a’, // 次ページを読み込むためにクリックするボタン
autoLoad: false,// スクロールの自動読込み解除

start: function(current, next){
$(‘#loading’).css(‘display’, ‘block’);
$(‘#more a’).css(‘display’, ‘none’);
},

load: function(current, next){
$(‘#loading’).css(‘display’, ‘none’);
$(‘#more a’).css(‘display’, ‘block’);
if( current.page >= maxpage ){ //最後のページ
$(‘#more a’).hide(); //次ページのリンクを隠す
}

$(‘#grid-container’).masonry(‘reloadItems’);//次ページをローディング後もう一度Masonryを起動
$(‘#grid-container’).masonry(‘layout’);//読み込んだ記事を含めて再レイアウトする

}
});

//次ページ読み込みボタンのアクション
$(‘#more a’).click(function(){
$.autopager(‘load’); // 次ページを読み込む
return false;
});
});

赤字で表示している二つのメソッドを、autopagerのload処理後に適応すると、レイアウトがちゃんと適応されます。

対処法が紹介されているサイトでは$grid.masonry(‘reload’);と言うメソッドをクリックアクション内に記述するように書かれてますが、コレだと動かない上に現在.masonry(‘reload’);と言うメソッドがないことが判明しました←

いやーハマったw
でもこれで、もう大丈夫です(´・ω・`)

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です