比較検討の結果、Liteboxを組み込むことにしました。

導入方法

まず、プラグインを以下からいただきました。

ダウンロードし、tdiary/misc/pluginに配置しました。

その後、tdiaryの管理画面からプラグインを有効にします。

すると、以下のタグがヘッダに挿入されるようになります。

http://./litebox/js/prototype.lite.js

http://./litebox/js/moo.fx.js

http://./litebox/js/litebox.js

このままでも問題なければこのままで。相対パスを変更したければtdiary.confにオプションを記入すればよいようです。記入できるオプション名と記入の仕方はプラグインの先頭に書いてくれています。

#   Options

#     @options['litebox.url'] = string

#       example:

#         @options['litebox.url'] = '/litebox/'

#

#     @options['litebox.resizeSpeed'] = integer

#       controls the speed of the image resizing (1=slowest and 10=fastest)

#

#     @options['litebox.borderSize']  = integer

#       if you adjust the padding in the CSS, you will need to update this variable

私の場合はHikiとtdiaryで共有する関係上@options[‘litebox.url’]に絶対URLを指定しました。

@options['litebox.url'] = 'http://ebi.dyndns.biz/litebox/'

あとは、litebox本体を配置します。以下の場所からダウンロード。

配置する場所はヘッダで指定されている場所と一致するように配置します。この際に注意点が1つあります。

「ダウンロードしてきたライブラリ内のファイル名はlitebox-1.0.jsですが、プラグインが指定しているのはlitebox.js」です。

なので、ファイルをコピーするなり、シンボリックリンクを張るなり、名前を変えるなりして対応してください。

あとは「you must add onload=”initLightbox()” into your body tag」ということですので、これを実現する必要があるのですが、どこでいじればいいのかよくわからず困りました。とりあえず、/tdiary/skel/header.rhtmlをいじってしまえば目的は達成できます。これが正しい方法なのかどうかはよくわかりません。

でもこれで準備は完了。さて試してみよう・・・ということでimage_ex.rbをつかって画像をアップロード。ちなみにこのプラグインもすべての画像へのAリンクにref=”lightbox”と付け加えています。

動作確認

そうしてできたのが以下の画像。クリックすればうまく動きます。と、言いたいところなのですが、うまく動きません(涙)

クリックすると一応動作はするのですが肝心の画像が表示されませんし、背景が半透明になるはずの動きもしません。正確には上のほうの少しだけしか対象になりません。これはまた私のサイトの構造やCSSが悪いのでしょうか・・・。

また修正対応が必要になりそうです。lightbox v1に引き続き今回もです・・・。(涙

今日はもう遅くなったので、また明日やります。年内に終わるといいなぁ。。。

追記

ずっとFirefoxで確認していたのですが、「もしかしたらIEならうまく表示されてるかも！」と思って確認してみたら、IE7でもIE6でもサイト自体正常に表示されなくなっちゃってました。ショック。

仕方が無いので、いったんプラグインを無効にしました。何でだろう・・・。

さらに追記

プラグインを無効にした上で手動でヘッダに記述をしてみたらあらかたうまく動いちゃいました。ただ、右下の閉じるボタンが表示されていませんが。プラグインの不具合かな?

loading.gifとcloselabel.gifに関しては相対パスで必ず./images/以下を見に行ってしまうような感じの動きに見えます。とりあえずとりにいきたがる場所に画像ファイルを置いてあげればうまく動きました。

これで一応動いたんだけど、なんだかちょっと腑に落ちない点が多々あるので、明日追加で確認しよう。