fancyboxを導入しようとしてみました。(ｊQueryプラグインの使い方)

注意：fancyboxは実際に動きましたので、そちらの参考にしてくださっても結構です。とはいえ、今記事のメインはどちらかというと、「Litebox系プラグインのfancybox」ではなく、「よくわからないプラグインを使うために、サンプルソースから必要部分を切り出す方法」 です。

なお、fancyboxのバージョンは 2.1.5 。2013年07月29日時点の最新版です。


追記：「fancyBoxで装飾したフォームからPOSTを送信する」方法とサンプルコードを公開しました。

イントロダクション

デザイナ氏の要望により、コメント欄は、画像ボタンをクリックするとページ上に上書きする形で登場させることになりました。

そのような機能を持つJavaScriptライブラリを探した結果、 fancyboxに行き着きました。(この時点でLightboxをしっかり調べなかったことが悔やまれます...)
早速これを使おうとしたのですが、Webの情報通りの方法では、使うことができませんでした。やはりWeb関連技術は変化が激しいようです。

とはいえ、そこはそれ。

fancyboxには(ローカルで!)動作するサンプルが添付されています。今回は、サンプルを解体しつつ、fancyboxの組み込み方を調べていきます。

最終的なソースは末尾に添付しますので、流れは流れとして雰囲気をお楽しみください。

HTML文の切り出し

コメント入力欄をボタンクリックでポップアップさせるのが目標です。そこで、サンプルからそれらしきものを探します。
 まず、適当にリンク名でアタリをつけつつ、
 「Open single item, custom options」リンクが該当するようです。
iframeによって
Ctrl+Uか、htmlファイルをテキストエディタで開いて、該当部分を探します。
必要最小限だけを切り出したいところですが、デモおよびfancybox本体がcssをどのように使っているかわからないので、 「Open manually」以下の項目を切り出します。


HEAD内のjavascriptは、今回必要な部分はごく一部でしょうが、最初なのでこの部分もそのままコピーします。JavaScript呼び出し部分はそのまま...のつもりだったのですが、ちょっとリンクを工夫しています。
外部のライブラリは、可能な限り mods/ディレクトリに格納するつもりなので、fancyboxもこの下にしまい込みます。ディレクトリ構造をバージョンに依存させたくないので、fancybox というリンクを作成して、fancybox本体が入っている fancyapps-fancyBox-18d1712 ディレクトリと繋げます。


ヘッダとフッタはそれぞれ、リンクとJavaScript呼び出し部分と一緒にコピーしておきましたので、これでHTML文章としての体裁は整います。

fancybox呼び出し部分の切り取り

動作するようになったら、さらに要素を切り取っていきます。

まず気になるのが、 ヘッダでのfancyboxの呼び出しと条件分岐です。
どう考えても、使わないidやタグが多いので、整理していきます。

id属性 "#fancybox-manual-b"と、デフォルト設定かもしれない $('.fancybox').fancybox(); 以外の属性に対するコードを削除します。

動作確認してから、 $('.fancybox').fancybox(); も削除して、また動作確認します。

問題なく動くようなので、id名を変えてみようと思います。
ついでにid要素ではなく、class要素に変更します。これは最終的に、ひとつのページに複数のfancyboxリンクを作るのが目的であるため、その下準備です。

HEADにある関数内で、idを指定している部分をclassに書き換えます。

             $(".fancybox_iframe").click(function() {
本当は、あまり汎用的な名前をつけないほうが良い気もしますが。(fancybox内部の指定と重複しそうで怖い。)



なお、この段階でヘッダ内のcss定義(外部ファイルの fancybox.css ではなく、内部に定義されていたほう)を削除しています。

結果

最終的にこんな感じになりました。
あまり要素を切り取りすぎても、あとで必要になって追加することになりそうだったので、これで私的用途に叶う最小版ということにします。
(現状で、呼び出し小ページ本体には興味がないのでデモのまま。)

ディレクトリ構造は以下のようになりました。

fancyapps-fancyBox-18d1712 (fancybox本体。配布されている状態のまま)
    lib
    source
    ...                (その他)
iframe.php   (上書き表示される子ページ)
index.php    (メインページ・親ページ)
mods         (外部ライブラリをまとめて入れておくためのディレクトリ)
    fancybox ( ../fancyapps-fancyBox-18d1712 へのリンク)    

呼び出し子ウィンドウでphpの実行、GET渡しと、複数のfancybox

本来の目的はコメント投稿欄です。なので本来は、これまで手を入れてこなかった、子ウィンドウのiframe.phpには手を入れていくところだったのですが。
上書き表示されるformの作成、Lightboxでできるそうです。
調査不足が残念な感じではありますが、子ウィンドウ側でJavaScriptを試行しているうちに新しい知識が付きましたし、ｊQueryのプラグインを使う感覚も知ることができました。(プラス思考)

というわけで次回、「『BLOG 防備録』様を見ながらLightboxでform」に続く？

その他雑記

「Lightbox系プラグイン」というのは、ページ内でコンテンツの上に上書きの形でかぶせる機能を指すのでしょうか。
(この動作はよく、「画像をポップアップさせる」と紹介されています。私は"ポップアップ"といえば、Windowsのダイアログのような、別ウィンドウが立ち上がってくる状態を想像してしまいますが。)


ところで、Lightboxを見ただけでも、ｊQueryの類似プラグインが乱立しているようですが、1年後にメンテナンスされているのはこのうち何割なんでしょうかね？