THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
javascript
Thickbox
写真
jquery
Lightbox
photo

LightBox
jQuery LightBox plugin

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

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

何が起こっていたか

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

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

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

表示されなかった原因

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

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

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

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

解決方法

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

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

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

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

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

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

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。