Lightbox JS v2.0を導入する。写真(サムネイル画像)をクリックすると画面上に実寸サイズの写真を表示させるツール。
テンプレートに、
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
と記述するのを忘れずに...。さらに、各アーカイブページのテンプレートにも。
あと、クローズボタンの画像が相対パスになっているので、lightbox.jsの
//
// Configuration
//
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
の部分を環境によってカスタマイズすること。このブログの場合はルートディレクトリに置いたので「/」を足す。
参考URL:
Lightbox JS v2.0の公式サイト
小粋空間: Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す
http://hamster-santa.info/log/eid676.html