• かちびと.net

    要素を無限スクロールさせるjQueryプラグインいくつか。ただのメモです。infinite scroll系のプラグインが必要になりそうなので見かけたものをまとめてあとで検証します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

要素を無限スクロールさせるjQueryプラグインいくつか

スポンサーリンク

必要になるかも知れないので、
今のうちにかき集める作業です。
よくみる無限スクロールサイトを
実装できるjQueryプラグインです。
あんまり使ったこと無いので
注意点なんかのメモ書きもして
おきます。

というわけでいつもの自分用メモなので、これから触る用のまとめです=オススメプラグインとかじゃないです。無限スクロールと言っても要素が無くなれば止まります。当たり前ですが。

Tumblrとかギャラリーとかでよく見かける無限スクロールを実装できるやついろいろ。WPデザインギャラリーでも実装していますが、これは5509氏のプラグインによるものです。便利っすー。

infinite scroll


jQuery Masonryっていう、boxを段々にするやつと一緒に使ってるのを以前実装しました。結構よかった。WPプラグインもあるみたい。

infinite scroll

Endless Scroll


ちと古いプラグインですが今年の1月もアプデしてるので一応開発は継続してるみたいですね。ライセンスは MITとGPLのデュアルライセンスです。

$(document).endlessScroll({
  fireOnce: false,
  fireDelay: false,
  loader: "<div class="loading"><div>",
  callback: function(p){
    alert("test");
  }
});

本体とプラグイン読み込んでローディングとかコールバックを設定。

Endless Scroll

Infinite Ajax Scroll


シンプルで良さそうです。まずこれ触ってみようかなと思います。MITライセンス。

jQuery.ias({
	container : ".listing",
	item: ".post",
	pagination: "#content .navigation",
	next: ".next-posts a",
	loader: "images/loader.gif"
});

ローディング画像とかトリガーとなるセレクタの指定はこんな感じだそうです。

Infinite Ajax Scroll

Screw


デモをパッと見た感じではちょっとピンとこなかった・・・一応候補で。

Screw

Autobrowse jQuery plugin


FlickrとかTwitterのAPIに対応できるようにもなってる・・のかな?なかなか素敵でした。MITライセンス。

Autobrowse jQuery plugin

jQuery Waypoints

追記。教えてもらいました。via:y-kawaz

jQuery Waypoints

jQuery.autopager

追記。たまたま見つけた国産プラグイン。

jQuery.autopager

ググって見かけてまとめただけです。いい加減なので適当に流してくださいませ。

Todo:とりあえずこれだけ暇見て動作テスト
Memo:
フッターが無いに等しくなる。
cookieとか使わないと大きくユーザビリティを損ねる。
出来れば止められるように。

URL :
TRB :

Comments & Trackbacks (4)

  1. Kenichi

    Mansoryにinfinite scrollのプラグインは上手く実装出来なかったので、function phpに書いたら上手く行きました。
    http://kenichihanasaki.com/

    // masonry code
    jQuery(document).ready(function($){
    var $container = $(‘#container’);

    $container.masonry({
    // options
    itemSelector : ‘.post’,
    isFitWidth: true,
    isAnimated: true,
    animationOptions: {
    duration: 400,
    easing: ‘linear’,
    queue: false,
    }
    })

    $container.infinitescroll({
    navSelector : ‘.infinitescroll’, // selector for the paged navigation
    nextSelector : ‘.infinitescroll a’, // selector for the NEXT link (to page 2)
    itemSelector : ‘.post’, // selector for all items you’ll retrieve
    loading: {
    finishedMsg: ‘No more pages to load’,
    loadingText : ‘Loading…’,
    loadingImg : ‘../images/loader.gif’,
    donetext : ‘No more pages to load.’,
    debug: false,
    }
    },
    // trigger Masonry as a callback
    function( newElements ) {
    var $newElems = $( newElements );
    // 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 );

    });
    });
    });

    • シロ

      function.phpという事はWordPressのお話でしょうかね?
      前後の話が見えないのでご事情が良く分かりませんが・・

      ただ、function.phpに書いたから上手く行った、というのは基本的に有り得ないので動作しなかった要因は他にあると思われます。

      ともあれ、上手く動いて何よりですー!

      • Kenichi Hanasaki

        そうです。ワードプレスです。
        説明不足ですいません、function.phpではなくfunction.jsの方でした。
        loaderをページ下部にCSS指定して、
        index.phpのをで囲みました。
        プラグインの方でも解決策は有ったかもしれませんが。。。
        とにかく、mansoryとinfinitescroll良い感じに実装できました。
        どうもありがとうございます。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services