facebook風の無限スクロールを実装するプラグイン「infinite scroll」

2013.09.06

2015.01.12

WEBサイトや、ブログ等の記事をページング機能ではなく、facebookのタイムラインのように無限スクロールで実装するプラグイン「infinite scroll」。

wordpressなどのブログ記事や、ECサイト等、様々なシーン活躍出来そうですね。

今後使いそうな予感がするので、覚え書き。

1.まずは、プラグインの準備

JQUERY本体をJQUERYの公式サイトから、infinite scrollをinfinite scroll配布ページの、ページ右下の「Download ZIP」ボタンからダウンロード。

まずは、JqueryとJavascriptの読み込み。

   


2.設定方法

プラグインの設定部分を記述。まずはプラグインを適用したい要素をセレクターに指定する。

    


※jQueryプラグインは、適用したい要素に、.(ドット)繋ぎでプラグイン名を書き、丸括弧”()”とセミコロン”;”を書くことで実行される。

3.オプションの指定

最後にオプションを指定。基本的な機能は以下の3つを指定すれば利用可能。

  • navSelector:次に読み込む要素を囲む要素を指定
  • nextSelector:次に読むこむ要素自体を囲む要素を指定
  • itemSelector:表示させたい要素を指定
  

その他のオプション。

  • debug:console.logに出力するデバッグメッセージを有効/無効にします
  • loadingImg:ローディング時に表示する画像のパスを指定します
  • loadingText:ローディング画像に添えるテキストの指定をします
  • animate:コンテンツのロード時にアニメーションさせるか指定します
  • extraScrollPx:次のコンテンツを読み込むまでのスクロール量をピクセル指定します
  • donetext:全てのコンテンツを表示し終わったら表示させるテキストを指定します
  • errorCallback:404ページがコールされたときや、これ以上のコンテンツがない場合の処理を指定します
  

KEiSoN★

インターネット・ITに将来の可能性を感じ、デジタルハリウッドオンラインスクールで、webデザインを学ぶ。
2007年よりECカート開発会社にてwebディレクター/webデザイナーとして従事。マネージャー職も務める。
2009年1月よりフリーランスのwebディレクター/Webデザイナーとして独立し、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばすなど、写真や映像のクリエイティブにも触れる。
2015年11月にスカイゴールド株式会社として法人化。
中小企業向けのWebブランディング・デザイン、Wordpressのオリジナルテーマ開発・オウンドメディア構築が得意。
国内外の様々な価値観・デザインに接触することで、幅広いクリエイティブや臨機応変にアイデアを提供する。