“jQueryベースのyuga.jsをちょっとだけカスタマイズ。（大文字の拡張子でもthickboxが動くように。）”という、夢実現のためのアファメーション。

大文字はNG？

yuga.jsには、画像に直リンクすることでthickbox.jsを起動して画像をページ遷移することなくオリジナルの画像を表示する...というイカした機能があるんだけど、そこでちょっとした問題が。

デジカメとかで写真を撮ると、画像の拡張子が大文字（例：JPG）になってることがあるけど、そういう画像に直リンクすると、thickboxが効かずに画像そのものをブラウザで開いてしまう。

thickboxは、通常aタグに「class="thickbox"」をつけるとギャラリー表示できるというもので、yugaを使わずに、普通にクラスを指定して実験してみると、大文字の拡張子でもthickboxが起動した。

じゃあ、選択肢は二つ。

１、yuga.jsを使わないで、jQueryとthickboxを使って、クラスを指定すりゃいいじゃん！ってことなんだけど...いちいちクラス名を付けるってのがめんどくさい。
（CMSとかに組み込んだりして、サラっと使いたい。）

２、画像は全て小文字の拡張子に直してアップロードする。
⇒さらにめんどくさい！っつか、一般のユーザーはそんなこと（yuga.jsを使ってるかどうか）を知りもしないだろうから...っつか、そもそも関係ないから、「拡張子は小文字でよろぴく」なんて言うのは現実的じゃない。

...っつーことは、うーん。
プログラムとかちょー苦手なのに、yuga.jsのほうをいじらなきゃいかんということなんだけど...あっさり解決。

大文字の拡張子の場合の処理を追加する。

表題で「カスタマイズ」とか偉そうに書いてますが、要は書かれているコードをコピーしてちょっと直しただけです。（汗）

yuga.jsの160行付近にある下記の部分を、

tb_init('a[href$=".jpg"]:not(.thickbox, a[href*="?"]), a[href$=".gif"][href!="?"]:not(.thickbox, a[href*="?"]), a[href$=".png"][href!="?"]:not(.thickbox, a[href*="?"])');

以下のように修正。

tb_init('a[href$=".jpg"]:not(.thickbox, a[href*="?"]), a[href$=".gif"][href!="?"]:not(.thickbox, a[href*="?"]), a[href$=".png"][href!="?"]:not(.thickbox, a[href*="?"]),a[href$=".JPG"]:not(.thickbox, a[href*="?"]), a[href$=".GIF"][href!="?"]:not(.thickbox, a[href*="?"]), a[href$=".PNG"][href!="?"]:not(.thickbox, a[href*="?"])');

んで、あとは今までどおり、画像を直リンクで指定すれば、ちゃんとthickboxが動くようになりました。

めでたしめでたし。

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！