flipsnap.jsに現在のページ数を表示したいです。

Question

javascript、JQueryとも初心者です。

スマホ向けのスライドギャラリーをflipsnap.js（http://hokaccha.github.io/js-flipsnap/）を使って作成中です。

ページフリップ、moveToPoint（ページを指定して移動）機能、next・prevボタンと併用して、
現在のページの位置をpointmoveではなく、ページ番号で表示したいと思っています。

色々と調べて試してみたりもしたのですが、思うように動きません。
どなたかご教授いただけるとうれしいです。よろしくお願いいたします。

Answer 1

naga3さんも書いていますが、flipsnap.currentPointという変数に何番目のitemを表示しているかが格納されているので、あとは'fspointmove'イベントを拾って値をテキストで差し込んであげればいいかと思います。

grasshopaTWさんがスライドギャラリーをどういったHTMLで書いているかはわかりませんが、だいたいこんな感じで動くと思います。

// ページ数を表示するHTMLを準備
var $pageNum = $('#pageNum');

$(flipsnap.element).on('fspointmove', function() {
    // fspointmoveイベントが発火する度にflipsnap.currentPointの値をテキストで挿入
    $pageNum.text(flipsnap.currentPoint+1);
});

JSFiddleにデモを置いておきます。
http://jsfiddle.net/zanufsco/

Comments

[kirigiris]

したかった事はデモの通りでした。ありがとうございました！

覚え書きとして残されていた方のページにもcurrentPointと書かれていたのですが、どのように取得し表示してよいかも理解できていませんでした。

まだお教えいただいたコードがきちんと頭に入ったとは言えませんが、もう少し時間がかかりそうなので、ひとまず先にお礼申しあげます。

Answer 2

「ページ番号で表示したい」がちょっとイメージ湧かなかったのですが、こんな感じですか？
http://jsfiddle.net/jyy2256z/

Comments

[kirigiris]

早速にご回答ありがとうございました。お返事が遅くなり失礼いたしました。

「ページ番号で表示がしたい」とはo_tiさんにご回答いただいたような、
「2ページ目でござるよ。」の部分の意味でした。
言葉足らずで申し訳ありませんでした。又よろしくお願いいたします。有り難うございました！

Answer 3

Demoページを見ただけですが、

var flipsnap = Flipsnap('.flipsnap');
としたときにflipsnap.currentPointに現在のページ番号が入るようなので
それを表示してみてはどうでしょうか。

Comments

[kirigiris]

席を外してしまいお礼が遅くなり失礼いたしました。
早々にご回答を有り難うございました。

「flipsnap.currentPointに現在のページ番号が入るようなので」とはどの部分で判断すればよいのでしょうか？