fjtさんにコメントで情報をいただいて、Lightbox JSを組み込んでみました。導入時に参考にしたのは以下の情報。
- http://huddletogether.com/projects/lightbox/
- http://nais.to/~yto/clog/2006-01-04-2.html
- http://openstratus.com/article/52/lightboxjs-web20/
- http://ebi.dyndns.biz/diary/20060104.htmlのコメント
該当のスクリプトをtdiaryのフォルダに配置し、CSSは自分が使っているものに組み込んでしまいました。JavaScriptのタグはtdiaryのヘッダに書き込んで、image_ex.rb内でHTMLを出力している部分にrel=”lightbox”を自分で追記しました。(とりあえず全部のタグ出力場所に追記してしまったけど、fjtさんの改造したやつと答え合わせをしたら、追記した数が違っていた・・・。よく読んでないので詳細は不明。)
で、だいたい動いてますが、ちょっと不具合発生です。
- IE, SleipnirのIEエンジンで見ると、画像表示時の背後の半透明画像がきちんと画面全体に配置されていない。
- SleipnirのGeckoエンジンで見ると、問題の半透明画像が表示されない。
- でも、firefoxで見るとうまく行ってる。
自作のテーマが悪いのかと思い、別のテーマにしてみてもやっぱりIEエンジンでは自分のページではずれてしまう。
fjtさんのところもtdiaryだけどうまく行ってますしね。何が悪いのかなぁ・・・・・・なんて思うけれども、どうせJavaScriptだからあまり気にしない方向でいこうかなぁなんて思ってます。弱気。
とりあえず、lightbox.jsの239行目の以下の記述で大きさがコントロールされているところまでは理解。
objOverlay.style.width = '100%';
100%なのに100%にならないとは・・・。なぜだろう?IEのバグかなぁ・・・。
仕方が無いので、以下のように修正。
objOverlay.style.width = (arrayPageSize[0] + 'px');
あと、下の方になぜか無意味に記述されている(ように思える)以下の2行を上記の行よりも上に移動。
var arrayPageScroll = getPageScroll();
var arrayPageSize = getPageSize();
これで横幅はOKになったのだが、まだ縦幅が足りない・・・。こちらは151行目の以下の部分で定義されている模様。
objOverlay.style.height = (arrayPageSize[1] + 'px');
きちんとページサイズを取得できてないんだから、今の私にはお手上げ・・・ということでとりあえず適当にサイズを足しときました。
objOverlay.style.height = (arrayPageSize[1] + 500 + 'px');
これでまぁまぁ見られるようになったかな。
だれもいらないかもしれないけど一応こちらにおいておきます。
{{ul_display 0}}