Lightbox JS v2.0をPloneで使ってみたいなぁ

リミのチュートリアルにあんまり目新しい事が書いて無くて、少しがっかり気味で、故に超訳するのめんどくさいな～と思ったので、現実逃避することにしました。

ということでLightbox JS v2.0に挑戦です。Lightbox JSの方は簡単でした。やり方はたかのりさんの「アルバムを lightbox で表示」を参考にすればよいかと思います。よーし、おんなじふうにしてLightbox2を実現してやるぜーヾ(゜∀゜)/

しかしちょっと待てよ、と。アルバムだけLightboxというのもアレだし、そもそも自分はアルバムなんてつかわんし、画像にしても、ちゃんと見せたいものとそうでないものとか、大きいモノと小さいモノとかいろいろあるんだから、（ブログとか文書作成で）自分の望むモノだけをLightboxにできれば十分だよなぁ。ということで、rel="lightbox"は手書きでいくことにしようっと。

Lightbox2をPloneで使うときのポイントは、もともと「src="scriptaculous.js?load=effects"」としてエフェクトを読み込んでいる部分。

そもそも、scriptaculousは以下の機能を持つけれど

• builder
• effects
• dragdrop
• controls
• slider

こいつらは「builder.js」とか「effects.js」とかバラバラのファイルになってて、scriptaculous.jsはこいつらを読み込んでいる親分である。Lightbox2では「effects.js」のみを利用するため、Lightbox2のサイトでは「src="scriptaculous.js?load=effects"」としている。

ただ「他のも全部読み込みたいぜ～」という時はただ単にscriptaculousのみを指定してやればいい。ということはわざわざ「src="scriptaculous.js?load=effects"」なんてしなくてもソースにscriptaculous.jsを指定すればそれでOKなのである。

それじゃあフツーに「scriptaculous.js」やら「effects.js」やらをportal_javascriptに登録すればよいかといえば、…。いかーん、いかん、いかんのである。なぜならportal_javascriptは、登録したjsファイルをまとめて束にしてしまうからである。

試しにZMIからportal_javascriptへ行き、「Merged JS Composition」というタブを見てみると次のようになっている。

これはつまり、「register_function.js」や「cssQuery.js」や、他のjsたちを全部まとめて「ploneScripts0118.js」という一つのファイルにまとめているということですな。この機能はもちろんフツーはトラフィックの効率をよくしてくれるステキなことなんだけど、Lightbox2を利用するに当たってはイクナイことなのである。

何故これがいけないかというと、scriptaculous.jsは「builder」やら「effects」やらといった機能を名前で探しているからである。scriptaculousは「build.jsはどこかなぁ～」とか「effects.jsどこいったんだモルァ！」とかいった具合で探しているのに、マージされた状態では、周りにいるのは「ploneScripts1234.js」とかいった知らない人たちばかりである。そのためscriptaculousは「誰もいないやションボリ…」といった具合にすねてしまって機能を提供してくれないのである。

ということでLightbox2を使うためにはこやつらをマージさせないことが必要になる。マージさせなくするのは非常に簡単で、「Merging allowed?」のところのチェックをオフにするだけである（デフォルトではチェックが入っている）。

と、いうことで、手順メモメモ。

1. Lightbox2のサイトへ行って、アーカイブをダウンロードしてくる
2. 「lightbox.js」、「scriptaculous.js」、「effects.js」、「prototype.js」、「lightbox.css」、「blank.gif」、「close.gif」、「closelabel.gif」、「loading.gif」、「next.gif」、「nextlabel.gif」、「prev.gif」、「prevlabel.gif」を「portal_skins/custom」にガンガンぶちこむ
3. 追加した「lightbox.css」の48, 53, 55行目あたりの画像の指定を修正する（「../images/」を削除）
4. 追加した「lightbox.js」の62, 63行目あたりの画像の指定を修正する（「images/」を削除）
5. portal_javascriptへ行き、「lightbox.js」、「scriptaculous.js」、「effects.js」、「prototype.js」を追加する（ただし「effects.js」は「Merging allowed?」のチェックをオフにする）
6. portal_cssへ行き、「lightbox.css」を追加する

あとはエフェクトをかけたい画像リンクに「rel="lightbox"」を指定してやればできるハズですな！

# 強引な力業としてはメインテンプレートのJSスロットに

<script type="text/javascript" 
  tal:attributes="src string:$portal_url/scriptaculous.js?load=effects">
</script>

ていう感じにすればよいですかな。

試しに実家のこうちゃんの写真をLightbox2してみよう。