画像へのリンクへ Thickbox を採用
Posted by yoosee on Web at 2007-04-07 22:00 JST
1
ThickBox 2.1.1
画像のリンクがあまりにそっけなかったので、jQuery.js を使った画像ポップアップライブラリ ThickBox を導入してみた。基本的にはダウンロードしたものをどこぞに置いて <head> 内から link と script 要素で読み込み、ポップアップさせたい画像の <a> 要素に class="thickbox" を付けるだけ。複数画像がある場合は rel="グループ名" でまとめる(Prev, Next リンクを出す)ことが出来る。サンプルは過去のネコ戯れ画像。JavaScript が有効な環境では画像をクリックすると画面にシェードがかかってリンク先画像がポップアップ表示されるはず。class="thickbox" を付けないと対象にならないようなので、うちの blog 今の時点では新規画像に付いてのみ適用される。過去画像についてはその周りの span 要素に特定 class があるから thickbox.js をいじれば対象に出来そうな気がする。どのみちあまり時間がないので後ほど。それと thickbox.css が * { margin:0; padding: 0; } を指定しているのが気に食わなかったので消してみたが、レイアウトに問題無さそうに見える。これも後ほど要確認。