続：画像を自動的にLightBoxで表示するようにした

2008/04/08

前のエントリーのの続きとして書きます。

前回のエントリー以降、他のJavaSctiptを調べた結果、
原因を発見、なんとかjQuery LightBox pluginで表示できたので、
あらためてエントリーしておきます。

前回のエントリーで書いたのですが、
今回から画像の表示をjQueryのLightBoxプラグインを使って、
画像を表示させようと計画をしていた。

ところが、何らかの原因で、
ここのブログでは上手く動作してくれなかった。

なので、ここのブログで動作させている
すべてのJavaScript関連を調べたところ、
ようやくその原因となるSctiptを発見できた！

原因はなんと、サイドバーに設置している
Edge Now!のブログパーツだった。

それのブログパーツのどこが！？
なんて思うかもしれないが、
なんとこのScript、内部まで全部みたら、
なんとjQueryファイルを読み込んでいたのだ！

つまりだ、ここのサイトで
jQueryを２度読み込んでいたことが原因だった。
HTMLの頭でも読んで、中盤でも同じのを読んでいることで、
その間に入れたスクリプトに不具合が生じたのだった

なんてこった、まさかブログパーツで、
jQueryを読み込んでいるなんて･･･
誰が想像できようか！！！！！

そこで僕がとった解決方法は、
そのブログパーツのスクリプトから、
jQueryを読み込む部分を削除して対応した。
ここのブログではもう使っているからいりませーん！

ということで、今回の問題解決です！

尚、設置のしかたは
以前のthixkboxでの設置とほぼ一緒なので、
そちらを見てください（下記関連エントリー参照）。
thickboxとなっているところを、
lightboxにすればＯＫです。

そして、画像ファイルだった場合に
動作するようにするスクリプトを
このようにします。

$(document).ready(function(){		
	$('a[@href$=".jpg"], a[@href$=".gif"],
		a[@href$=".png"]').addClass("lightbox");
	$('a.lightbox').lightBox();
});

これからは、画像はthickboxではなく、
LightaBoxにて表示されるようになるので
画像のリンクの際は、ぜひクリックしてください。

参考サイト：