xpwikiの画像プレビュー(lightbox.js)がIEで動かない件について

javascript xoops unix

「まともに」をつけるの忘れた＞＜


社内のプロジェクトで使っているxoopsにxpwikiを導入しています。
xpwikiで画像を貼り付けると、クリックで画像のプレビュー(拡大表示)がその場で出来るようになります。
これはLightbox 2.02(lightbox.js)にて提供される機能で、実にインタラクティブで使いやすです。
http://www.huddletogether.com/projects/lightbox2/


しかしIEでは、プレビューまでは表示されるが、プレビューを閉じると画面が暗くなったままの状態になってしまうというバグがあります。
これはLightbox 2.02がIEに対応してないからです＞＜；


これを直すには、xpwikiのサイトから最新のlightbox.jsを落としてくればいいわけですが*1、どうせならlightbox.js側をバージョンアップさせて対応させてしまったほうが、使い勝手も良くなっているので良いかと思います。
最新のバージョンは2.04ですが、ちょっと変わり過ぎているので簡単な設定でバージョンアップできる2.03.3にします。


ちなみに、2.03.3にすると画面幅までしか拡大しなかったプレビューが画像サイズに合わせてプレビューされるようになり便利です。


2.03.3はreleasesディレクトリから取得して下さい。
http://www.huddletogether.com/projects/lightbox2/releases/


DLして、解凍したディレクトリはこんな感じになってます。

lightbox2
├	index.html
├ 	css	─	lightbox.css
├ 	js	┬ 	effects.js
│	 	├ 	lightbox.js
│ 	 	├ 	prototype.js
│ 	 	└ 	scriptaculous.js
└ 	images	┬	closelabel.gif
 	 	├ 	loading.gif
 	 	├ 	nextlabel.gif
 	 	├ 	prevlabel.gif
 	 	└ 	etc...


このままではxoopsでは使えないのでjs内のlightbox.jsを、diffを参考に変更します。

65,66c65,68
< var fileLoadingImage = "images/loading.gif";          
< var fileBottomNavCloseImage = "images/closelabel.gif";
---
> //var fileLoadingImage = "images/loading.gif";                
> var fileLoadingImage = wikihelper_root_url + "/skin/loader.php?src=loading.gif";              
> //var fileBottomNavCloseImage = "images/closelabel.gif";
> var fileBottomNavCloseImage = wikihelper_root_url + "/skin/loader.php?src=closelabel.gif";            
188a191,208
>               //if (!document.getElementById('body')) {
>                       var anchors = document.getElementsByTagName('body')[0].getElementsByTagName('a');
>               //} else {
>               //      var anchors = document.getElementById('body').getElementsByTagName('a');
>               //}
>               
>               // loop through all anchor tags
>               for (var i=0; i<anchors.length; i++){
>                       var anchor = anchors[i];
>                       
>                       var typeAttribute = String(anchor.getAttribute('type'));
>                       if (anchor.getAttribute('href') && (typeAttribute.toLowerCase().match('img')))
>                       {
>                               anchor.setAttribute("rel", "lightbox[stack]");
>                               anchor.onclick = function () {myLightbox.start(this); return false;}
>                       }
>               }
>

2.03になった時点で、anchorに勝手にlightboxのrelを付けるスクリプトが排除されているので、ソレを2.02から持ってきて追加しただけです。


lightbox.cssも変更が必要です。

47c47
<       background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
---
>       background: transparent url(./loader.php?src=blank.gif) no-repeat; /* Trick IE into showing hover */
52,53c52,53
< #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
< #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
---
> #prevLink:hover, #prevLink:visited:hover { background: url(./loader.php?src=prevlabel.gif) left 15% no-repeat; }
> #nextLink:hover, #nextLink:visited:hover { background: url(./loader.php?src=nextlabel.gif) right 15% no-repeat; }

パスをloader.phpに変更します。


xoopsへの更新はXOOPS_TRUST_PATH/modules/xpwiki/skin/内のファイルを更新するだけです。

更新ファイル一覧

追加ファイル一覧

これでlightbox.jsを2.03.3に更新でき、IEでもきちんとプレビューできるようになります。
やったね！

*1:最近まで放置されてたっぽいですが・・・