このエントリーをはてなブックマークに追加

1ページに写真をすべて表示したいが、件数が多くなった時のために分割して「続き」を読み込むようにしたい、ということで、ajax で次のページを読み込むことは出来たのだけど、jquery masonry でレイアウトしているので、読み込みのタイミングでmasonry をリロードしないといけない。
あれこれ色々とやってみたけれど、なかなかスッキリとは解決せず…読み込み部分に条件分岐が多かったり、別のjquery プラグインを利用していたりで。

で、あれこれ検索している時に見掛けたInfinite Scroll を利用すれば良さそう? あ、ワードプレスプラグインもあるのね!

ということで、http://wordpress.org/plugins/infinite-scroll/ を利用することにした。
親要素と、読み込む子要素を指定し、コールバックを記入して、masonry にチェックで、無事に続きを読み込むことが出来ました。*下までスクロールすると自動で読み込みます。

*WordPress ページングはやめてAjaxローディングにする 参照

2017.7 追記
Ajax Load More:http://web-taiyo.com/wordpress-plugin/170608.html 参照

2013.07.31 投稿 2017.08.02 更新

新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。

Recent Articles