2006-01-03
_ しもやけ
もともとしもやけになりやすい体質なのですが，今年もやっぱりなってしまったしもやけ…．右手と右足をやられてしまいました．できるだけならないようにと，手を洗ったときは入念にタオルで拭いて水分を残さないようにしたりとか，雨や雪の日は替えの靴下を準備しておいて，濡れたら即替えるようにしてたのになぁ．しばらくはこのかゆみとの闘いになりそうです．
_ Lightbox JS を使って画像表示をかっこよくみせてみる
ここのところ Firefox の拡張紹介などをはじめ，いろいろ画像とあわせて日記を書くことがあるのですが，大きめの画像は縮小表示しているので，クリックしてもらうと大きな画像を確認してもらうことができます．ただ，これだとブラウザの「戻る」なり新しいタブ，ウィンドウを閉じるなど，閲覧者に一手間かけている部分があるかもしれません．
そこで，lightbox.js - Web2.0ライクな画像サムネイル生成 ― OpenStratus Archive で紹介されていた，lightbox.js を利用して，画像表示を Web2.0 っぽく，ちょっといい感じに見せてみることにしてみました．
ためしにこのエントリーにある画像をクリックしてもらうとわかると思うのですが，元画像がポップアップ表示され，周囲が暗く透過された表示になると思います．Firefox などでは意図したように表示してくれるのですが，IE ではうまくいかないっぽいです．この辺は暇なときに調べてみることにします．その後，スタイルシートで overlay.png の記述部分が原因だったことが判明し，正しい場所を指定したら表示できました．
tDiary で lightbox.js を組み込む場合は，ここでは image_ex.rb を利用しているので，こちらにちょこっと手を加えることにしました．image_ex.rb の 120,123 行目で，rel="lightbox" を追記します．
%Q[<a href="#{image_url}#{list[id.to_i]}" rel="lightbox"><img class="#{place}" src="#{image_url}#{list[id2.to_i]}" alt="#{alt}"></a>]
...
%Q[<a href="#{image_url}#{list[id.to_i]}" rel="lightbox"><img src="#{image_url}#{slist[id.to_i]}" alt="#{alt}" #{width_tag} class="#{place}"></a>]
また，lightbox.js を呼び出すために，add_header_proc を新たに追記します．image_ex.rb の最後の方に，
add_header_proc do %Q|\t<script type="text/javascript" src="js/lightbox.js"></script>\n| end
と記述する．src はとりあえず自分の環境に合わせて書き換える必要があります．これで <head> で lightbox.js が呼び出されるようになります．あとは，Lightbox JSから，
- lightbox.js lightbox.js - the important stuff
- lightbox.css lightbox.css - basic style and tricky PNG support
- overlay.png overlay.png - 80% opacity, black tile used to create shadow
- loading.gif loading.gif - mock status bar used in examples above
上記のファイルをダウンロードして，適切な場所に配置します．lightbox.css は CSS の @import 宣言などで読み込むようにして，同じディレクトリに overlay.png も配置します．loading.gif はデフォルトではカレントディレクトに配置するようになっています．
ホイールクリックなどで画像リンクをクリックすると，通常通りタブで画像が表示されますし，JavaScript が無効な環境の場合は普通に画像を表示させることができます．
http://www.smallstyle.com/20060107.html#p01
SmallStyle
[tDiary][CSS] Lightbox JS での 背景画像 (overlay.png) の配置場所
Firefox だとポップアップした画像の周りが暗くなって見えるのですが，IE で表示させると画像のポップアップのみで，背景はそのままになってしまいました．Lightbox JS の配布元では IE でもちゃんと背景も表示されてるから，うちのサイトでの CSS 周りで何か問題があるの..
ＩＥ でポップアップしないのは、lightbox.css がロードされていないのが 原因ではないでしょうか？
また、別の作者の Lightbox Plus という機能向上版もあります。
http://serennz.cool.ne.jp/sb/sp/lightbox/index_ja.html
その後IEでもうまく動くようになりました．overlay.pngの場所指定がおかしかったのが原因でした．
なるほど、パスがスタイルシート想定でなくページからの相対になるという ＩＥ の仕様ですね。これって ＩＥ７ になっても過去のコンテンツとの絡みがあるので厄介な問題になりそうですね。
http://spinred.org/sb/log/eid121.html
GochaBookMarkClips
Re: SmallStyle - しもやけ , Lightbox JS を使って画像表示をかっこよくみせてみる
SmallStyle - しもやけ , Lightbox JS を使って画像表示をかっこよくみせてみる