Lightboxを導入してみた
Rating: 
Loading ...
Palmer @ 2006/05/22 01:48 | コメント(0)
トラックバック(0)
ブログの見栄えを良くしたいなーと、いい物が無いか探していたところ、Lightboxというよさげなものを見つけたので、さっそく導入してみました。
ということで、簡単に導入方法を。
- このサイトでLightboxをダウンロードします。
- ダウンロードしたzipファイルを解凍し、imageフォルダを除く全てのファイルをサーバにアップロードします。
- テンプレート（またはスキン）に使うHTMLファイルのヘッダ部分（<head>~</head>の内側）に、以下の行を追加します。
<script type="text/javascript" xsrc="js/prototype.js" mce_src="js/prototype.js"></script> <script type="text/javascript" xsrc="js/scriptaculous.js?load=effects" mce_src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" xsrc="js/lightbox.js" mce_src="js/lightbox.js"></script> <link rel="stylesheet" xhref="css/lightbox.css" mce_href="css/lightbox.css" type="text/css" media="screen" />当然、各js/cssファイルへのパスは正しく合わせる必要があります。 - ここまで出来れば、あとはLightbox2を使って表示したい画像へのリンクに、rel=”lightbox”という属性を追加するだけです。
- テキストリンクから表示する場合:
<a xhref="hoge.jpg" mce_href="hoge.jpg" rel="lightbox">ほげ画像</a> - サムネイル画像から表示する場合:
<a xhref="hoge.jpg" mce_href="hoge.jpg" rel="lightbox"><img xsrc="hoge_small.jpg" mce_src="hoge_small.jpg" /></a> - 複数画像を連続して表示する場合:
<a xhref="hoge1.jpg" mce_href="hoge1.jpg" rel="lightbox[hoge]">ほげ画像1</a> <a xhref="hoge2.jpg" mce_href="hoge2.jpg" rel="lightbox[hoge]">ほげ画像2</a> <a xhref="hoge3.jpg" mce_href="hoge3.jpg" rel="lightbox[hoge]">ほげ画像3</a>
- テキストリンクから表示する場合:
一見ややこしそうにも見えますが、それは単に説明を書いている人間の能力の限界ってやつですorz 実際やってみると、ほんと簡単でした。
