---

記事に添付されている画像をダブルクリックすると…
一部はポップアップされるように、あるときから“Litebox”を導入したのですが、最近それが上手く行かないケースがあることに気がついてしまったので、「改善を図らねば…」と思っておりました。そのため、まずは“Lightbox v2.04”へと変更する修正を始めました。

ところが、これが全く上手く行く気がしない…orz
そのとき、「もう１つ手段はあった気がしたな…」と思い出したのが、“jQuery LightBox Plugin”。名前の通り、jQuery版のLightBoxで、今迄の画像系リンクに対して、“rel”なしでも問題なく使えそうだったからです。。。

しかし、実はこれもそのまま利用するだけではポップアップされないのです…orz
ただ、他のブログサイトを見ると、キチント導入することができているのです。「何故だろう？」と思っていたところ、昨日原因が分かりました。

このブログの個別記事において、チョット前に導入した…
「“zenback”が原因である」という記事を発見することができました。「これは間違いないな…」と確信して、導入方法が丁寧に書かれている記事を読みながら作業を進めたところ…無事、導入することができました♪

要は、「当サイトで読み込む“jQuery”と“zenback”が読み込む“jQuery”が衝突してしまうため」です。

この記事に検索して辿り着いた方であれば…
その理由に関しては、「あぁ、なるほどね～」という感じで納得することができるかと思います。ただ、自分はプログラム記述手法に疎いので、「スクリプトの開始を“$”ではなく、“jQuery”から始める」とか、「省略形にしてしまうと“zenback”が導入されている頁では“LightBox”の効果を導入することはできないです」と言われても、信じて突き進むことしかできないのですが…（；＾＾）

そんな訳で、今回は調査に時間を要しただけに、解決できたときは本当に嬉しかったです。
個人的なメモがてら、記事にしておきます♪

1. jQueryファイルのバージョンを変更する（×：1.23→○：1.26…1.3以上不可／※参考記事）。
2. ファイル名を短くする（※趣味の問題ですね…）。
   jquery.lightbox-0.5.css→“lightbox.css”
   jquery.lightbox-0.5.js→“lightbox.js”
3. “lightbox.js”へと変更したファイル内に記載されているimagesフォルダの参照先を修正する。
4. 下記のように記載した“lightbox-add.js”を作成し、必要なファイルをアップロードする。
   jQuery(function($){
   $('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]')
   .addClass("lightbox");
   $('#divのID名 a.lightbox').lightBox();
   });
5. ＜head＞内に下記の記述を追加し、再構築を実施する。
   ＜link rel="stylesheet" href="～lightbox/css/lightbox.css" type="text/css" media="screen" /＞
   ＜script type="text/javascript" src="～lightbox/js/jquery.js" ＞＜/script＞
   ＜script type="text/javascript" src="～lightbox/js/lightbox.js"＞＜/script＞
   ＜script type="text/javascript" src="～lightbox/js/lightbox-add.js" ＞＜/script＞

〆

<Postscript>

便利機能系は新しいものを１つ導入すると、従来のものは１つ壊れる…
そんなもんなんですね。やっぱり…（；＾＾）

- Entry Site -

    

      

Thank you so much to read My Blog. I hope it's a fine day for you. See ya!