web制作・webデザインオフィスskygold | infinite scroll

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

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

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

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

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

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


<script src"jquery-1.10.2.min.js"></script>
<script src"jquery.infinitescroll.min.js"></script>

</body>
</html>

</body>

</html>

2.設定方法

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


<script src"jquery-1.10.2.min.js"></script>
<script src"jquery.infinitescroll.min.js"></script>
<script>

$(function(){
    $('#content').infinitescroll();
});

</script>

</body>
</html>

$(function(){

$('#content').infinitescroll();

});

</script>

</body>

</html>

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

3.オプションの指定

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

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


<script>
$(function(){
    $('#content').infinitescroll({
        navSelector  : "div.navigation",
            // ナビゲーション要素を指定
        nextSelector : "div.navigation a",
            // ナビゲーションの「次へ」の要素を指定
        itemSelector : "#content div.post"
            // コンテンツ要素を指定
    });
});
</script>

$(function(){

$('#content').infinitescroll({

navSelector : "div.navigation",

// ナビゲーション要素を指定

nextSelector : "div.navigation a",

// ナビゲーションの「次へ」の要素を指定

itemSelector : "#content div.post"

// コンテンツ要素を指定

});

</script>

その他のオプション。

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


<script>
$(function(){
    $('#content').infinitescroll({
        debug: true,
            // console.logに出力するデバッグメッセージを有効にする
        loadingImg   : "/img/loading.gif",
            // ローディング時のローディング画像のパスの指定
            // デフォルトのパスは: "http://www.infinite-scroll.com/loading.gif"
        loadingText  : "Loading new posts...",
            // ローディング画像に添えるテキストの指定
            // デフォルトのテキストは: "<em>Loading the next set of posts...</em>"
        animate : true,
            // コンテンツのロード時にアニメーションさせるかの指定
            // デフォルトは: false
        extraScrollPx: 50,
            // 次のコンテンツを読み込むまでのスクロール量のピクセルを指定
            // animateを有効にさせるにはこの値を必ず指定しましょう。
            // デフォルトの値は: 150
        donetext : "I think we've hit the end, Jim" ,
            // 全てのコンテンツを表示し終わったら表示させるテキスト
            // デフォルトのテキストは: "<em>Congratulations, you've reached the end of the internet.</em>"
        errorCallback: function(){},
            // 404ページがコールされたり、これ以上のコンテンツがない場合の処理
            // このオプションはバージョン1.2から追加されました。
    },function(arrayOfNewElems){
        // コールバック
});
</script>

$(function(){

$('#content').infinitescroll({

debug: true,

// console.logに出力するデバッグメッセージを有効にする

loadingImg : "/img/loading.gif",

// ローディング時のローディング画像のパスの指定

// デフォルトのパスは: "http://www.infinite-scroll.com/loading.gif"

loadingText : "Loading new posts...",

// ローディング画像に添えるテキストの指定

// デフォルトのテキストは: "<em>Loading the next set of posts...</em>"

animate : true,

// コンテンツのロード時にアニメーションさせるかの指定

// デフォルトは: false

extraScrollPx: 50,

// 次のコンテンツを読み込むまでのスクロール量のピクセルを指定

// animateを有効にさせるにはこの値を必ず指定しましょう。

// デフォルトの値は: 150

donetext : "I think we've hit the end, Jim" ,

// 全てのコンテンツを表示し終わったら表示させるテキスト

// デフォルトのテキストは: "<em>Congratulations, you've reached the end of the internet.</em>"

errorCallback: function(){},

// 404ページがコールされたり、これ以上のコンテンツがない場合の処理

// このオプションはバージョン1.2から追加されました。

},function(arrayOfNewElems){

// コールバック

});

</script>

13.09.06　|　WEBデザイン制作・IT関連 KEiSoN★

The road not taken（選ぶもののない道）

アメリカンポップアート展〜「200個のキャンベル・スープ缶」を食す。

この記事を書いた人

KEiSoN★ > facebook

スカイゴールド株式会社　代表取締役 / クリエイティブディレクター/webデザイナー

2009年1月よりフリーランスのディレクター/Webデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、タイ・バンコクを年間4,5回ほど往復しながら活動中。
中小企業向けのWebブランディング・デザイン、Wordpressのオリジナルテーマ開発・オウンドメディア構築が得意。
最近は、Shopify構築にも携わっている。
国内外の様々な価値観・デザインに接触することで、幅広いクリエイティブや臨機応変にアイデアを提供する。