1)Lightbox をダウンロード
http://www.lokeshdhakar.com/projects/lightbox2/
2)js/lightbox.js を開き、53行目あたりを絶対パスに変更
LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
3)css/lightbox.css を開き、20行目あたりを絶対パスに変更
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
4)css/lightbox.css 25行目のフォント情報を変更(キャプションになる部分)
#imageDataContainer{ font-size: 12px; font-family: "Arial", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS PGothic", sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
5)css/js は unit へ、images は img へアップロード
6)MTテンプレートのヘッダに css/js をリンク
<link rel="stylesheet" href="<$mt:BlogURL$>unit/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$mt:BlogURL$>unit/prototype.js"></script>
<script type="text/javascript" src="<$mt:BlogURL$>unit/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<$mt:BlogURL$>unit/lightbox.js"></script>
7)1ファイルのリンク方法:rel="lightbox" と付ける
<a href="images/image-1.jpg" rel="lightbox" title="キャプション"><img src="images/thumbnail-1.jpg" /></a>
8)複数ファイルのリンク方法:rel="lightbox[common-name]" と付ける([common-name] に共通名を)
<a href="images/image-1.jpg" rel="lightbox[common-name]"><img src="images/thumbnail-1.jpg" /></a>
<a href="images/image-2.jpg" rel="lightbox[common-name]"><img src="images/thumbnail-2.jpg" /></a>
<a href="images/image-3.jpg" rel="lightbox[common-name]"><img src="images/thumbnail-3.jpg" /></a>