kohanaのテスト12-15・・・写真の表示にThickBoxを応用する

　WordPress ではごく一部に jQuery プラグインの ThickBox を使っています。せっかくなので、写真の表示に応用してみました。で、これが結構苦戦しました。ネットで調べると使い方はえらく簡単なはず。問題は次の2点でした。

　・文字化け画面が出るばかり。
　・フレームのサイズを誰かが勝手に決めている。

ThickBox 対策

　文字化けには参りました。その結果、HTTP ヘッダの調査・勉強にはなりました。原因は ThicBox のコードを読んで判明しました。<a href="---"> タグの URL の末尾を調べて画像ファイルかどうかを判断しているではないですか。なるほど、PHP ファイルに対するリクエストでは画像と判断してくれないわけです。

　仕方がないので、thickbox.js を書き換えちゃいました。

・/includes/wp/includes/js/thickbox/thickbox.js

72            var urlString = /mediaview$|\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
73            var urlType = baseURL.toLowerCase().match(urlString);
74 
75                 if(urlType == 'mediaview' || urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images

 　写真へのリンクは /kohana/test12_mediaview ですから、これでマッチさせることが出来ます。

　次の問題は、誰か（ javascript のどれか）が ThickBox のフレームサイズを強制的に決めていることです。これの切り分けに手間がかかりました。結論は、media-upload.js にありました。中に、tb_position というクラスがあり、何か計算してフレームサイズを決めています。で、ズバリこのクラスを全部コメントアウトしました。呼び出しているスクリプトは面食らうはずですが、これで正常動作しちゃうんですね。javascript って、すごくヤクザな感じがします。

　あとは関係するビューを書き換えればOKです。

動作確認

　素晴らしい！　ThickBox はファイルのアップロード画面なんかに使わないで、写真の表示に使うほうが適切な感じがします。もっとも、写真表示用には最近の jQuery プラグインを使った方が良いかと思いますけど。