jQuery + lightBox Plugin 導入話（zenback との共存 etc.） / JeffreyFrancesco.org

前回書いた通り、zenback を入れてると Lightbox 2 が permalink で動作しなかった訳ですよ。

で、理由はおそらく Lightbox 2 に必要な prototype.js と、zenback が読み込む jQuery の衝突だろう…という結論。

色々調べて prototype.js と jQuery の衝突を回避する方法があるのは分かりましたが、zenback のスクリプトは提供元の方でコーディングされてますので、コチラが手を加えるのは不可能。あるのかもしれませんが、おそらく私の手には負えません。涙

という訳で、Lightbox 2 の利用は諦め、同様の機能を持つ代替スクリプトを探す事に。もしかして同じ jQuery を利用する jQuery lightBox plugin であれば動作するかも? という甘い期待の元、ダウンロードして試してみる事に。

でも、これも調べてみるとどうやら一筋縄では行かなくて、今度はサイトの方で読み込む jQuery と、zenback が読み込む jQuery が衝突するらしい。回避する方法としては「zenback が読む jQuery より後に自前の jQuery を読み込ませる」らしいのですが、そのようにやってもやっぱり動作しない。うむー困った。汗

しかし、試行錯誤の結果、何とか動作させる事に成功いたしましたので、ココにご報告いたします。ついでに、jQuery + lightBox plugin ではグループセットを作ることが難しい（スクリプトに手を加える必要がある）という情報が多かったのですが、その辺りを回避というか、場合によっては工夫すれば、スクリプト自体に手を加えなくてもグループセット（もどき）は作れるよ、という方法がありますので、その辺りの解説も。

つか、そもそもこの組み合わせで他のところは特に手を加えなくても問題なく動いてるのかどうなのか、その辺は全く不明なのですよ…ネットを調べ回ってもその辺の情報が全く出てこないんですよね。だから解決に手間取った訳でもあるのですが。まあ余談はさておき続きをどうぞ。

さて、 jQuery と jQuery lightBox plugin の入手方法 etc. は既に情報があちこちに転がっているので割愛します。本家のサイト（jQuery / jQuery lightBox plugin）や、日本語なら SCREAMO CREATIVE の記事辺りなどでしょうか。

で、その辺りで説明されている a 要素への適用方法は、大体次のような感じのスクリプトを head 内に書きましょう…と言うことになっていると思います。

$(function() {
  $('a.lightbox').lightBox();
});

上の例であれば「lightbox というクラス名を付与した a 要素に lightBox 効果を適用」という事になります。

が、この通りに書いても zenback を導入してる環境ではまず permalink で動きません。また、動いたとしてもこの場合、一つのページ内にある ligbtbox クラスの a 要素全てに適用されてしまうので、ブログのアーカイブ的なページではあまり好ましくない（せめて記事ごとにグループ化できた方がいいですよね）とか、lightBox 効果を適用したい a 要素にいちいちクラス名などを付与しなくてはならないので面倒くさい(汗) など、色々問題点が出てきます。

そこで、次のようなスクリプトを書きました（私は lightbox-add.js という別ファイルに分けましたが、head 内に書いても特に問題ないはず）。

jQuery(function($){
  var jpg = 'a[href$=jpg]';
  var gif = 'a[href$=gif]';
  var png = 'a[href$=png]';

  $('div.entry').each(function() {
    var i = ( this.id || 'main div.entry' ) + ' ';
    $('#' + i + jpg + ', #' + i + gif + ', #' + i + png).lightBox ({
      imageLoading:  '/images/lightbox/ico-loading.gif',
      imageBtnPrev:  '/images/lightbox/btn-prev.gif',
      imageBtnNext:  '/images/lightbox/btn-next.gif',
      imageBtnClose: '/images/lightbox/btn-close.gif',
      imageBlank:    '/images/lightbox/blank.gif'
    } );
  } );
} );

以下、解説のようなもの。

スクリプトの開始を $ ではなく jQuery から始める。省略形にしてしまうと zenback が入っているページで lightBox 効果が適用出来ないです。

この記法は prototype.js と jQuery の衝突を防ぐ際に jQuery.noConflict() と共に用いられますが、今回のように jQuery が二重に読み込まれる際にも有効…なのでしょう多分（この辺は詳しくないので間違ってたら誰か訂正や詳しい解説を欲しい…汗）
続く function() の引数に $ を渡す事で、以下では $ を使う事が出来ます。
次から3つ続く var xxx = … の部分は、この後で「リンク先が画像ファイルである a 要素」をセレクトする際に記述が簡単になるよう、jpg, gif, png という3つの変数にセレクタを収めています。

内容は（お分かりになるかとは思うのですが）それぞれ「href 属性が jpg (or gif or png) で終わる a 要素」という事です。
ここからはサイト毎に依存する部分なので一概には言えない部分になってきますが、ウチのサイトはアーカイブページでも個別ページでも entry というクラス名の付いた div 要素で各エントリが基本的に括られているので、まずはそれを $ 関数で抽出します。
そして、アーカイブページではこの div.entry 自体に記事毎に固有の ID が割り振られています。なので、この div.entry それぞれに対して変数 i に ID 値を収めます。そして次以降の行で、それぞれのグループについて変数値を使い、
- $('#entry1 a[href$=jpg], #entry1 a[href$=gif], #entry1 a[href$=png]')
- $('#entry2 a[href$=jpg], #entry2 a[href$=gif], #entry2 a[href$=png]')
- $('#entry3 …（以下略
などとなる要素について lightBox 効果を適用してやれば、記事ごとに画像をグループセットにする事が出来るという訳です。
個別ページでは div.entry に対しては ID は割り振られてない（body に ID が割り振られています）ので this.id で ID を拾う事が出来ませんが、この場合は #main div.entry を変数 i に収める処理をします（個別ページには div.entry は一つしか存在しないため、特にグループ化する必要もない）で、同様に
- $('#main div.entry a[href$=jpg], #main div.entry a[href$=gif], #main div.entry a[href$=png]')
について lightBox 効果を適用してやれば OK という事になります。
lightBox() {… 以下の記述については、画像ファイルの置き場を指定しているだけです。

以上です。一番のポイントは jQuery(function($) { の部分ですね。グループセットの部分は、要は各エントリに ID を割り振るような設定さえ出来れば、エントリ毎にグループ化出来るようにセレクタの記述を考えれば良い訳です。この辺は MT や WordPress などなら独自タグを駆使してテンプレートに設定出来ると思いますが、レンタルのブログサービスなどでは厳しいところもあるとは思うので、こういう事も出来ますよ、という参考程度になればと思います。

そんな訳で、このページの最初に前回と同じ写真から抜粋したのを貼っておくので、このページで動作するか？とか、Weblog のアーカイブページでも、エントリ毎にグループ分けされた状態で動作するか？などを確認してみて下さい。

…が、上手く導入出来たからといって、今後このサイトに写真がいっぱいアップされるエントリが増えるような事は、きっとありえない。汗

追記 @ 2010年8月19日

実は zenback との共存という点でいえば、完全に対応出来てるぜ！という訳ではありませんで。汗

試していただけると分かると思いますが、lightBox 効果を適用した画像を開いた後に、フッタの下に謎の画像ファイルの残骸が残るのですよ…Safari の Web インスペクタで確認してみると、URL が http://ct.am6.jp/ で始まっているので、おそらく zenback がクリックトラッキングのような事で使用しているものだとは思うのですが。

一応調べた範囲では、Safari, Opera は発生しますが、FireFox だと大丈夫のようです（いずれも Mac 版、Window は知りません。爆）これが表に見えなくする方法を考えようと思いはしましたが、一体何が原因なのか分からないのと、別に大して実害がある訳でもないので放置する事にします。汗

でも、本当は出来れば直したいところです。原因の分かる方いらっしゃいましたらどなたかお助けを…