最近、画像をクリックすると、画面が黒くなって、その上に画像が表示されるといった、カッコいい表示の仕方が流行ってます。
これはLightboxっていうAjaxが使われてます。
HTMLへの組込みも難しくなく、簡単なテコ入れで表示出来るので、いいですね。
こんな感じで表示されます。画像をクリックしてください。
さて、これをMovableTypeに組み込むには多少の修正をしないといけません。
Lightboxは組み込むHTMLに下記のコードを加えます。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
画像を表示する部分で、rel="lightbox" を付加するだけです。
<a href="http://blog.karakuriya.biz/images/testtest.jpg" rel="lightbox" title="だから見なくていいってば"><img alt="testtest.jpg" src="http://blog.karakuriya.biz/images/testtest-thumb.jpg" width="120" height="90" /></a>
こんな風にです。
これはあくまでも、Lightboxはそのフォルダ下に入れてあることが前提です。MovableTypeの場合、エントリーのHTMLやカテゴリ毎のHTMLなど、どの階層に作られるかは、様々です。その度、そのフォルダにLightboxを入れることは現実的じゃないので、決まったフォルダに入れてしまうのは普通でしょう。
その際、Lightboxのソースをちょっとだけいじくります。
Lightboxを /lightbox に置くとして
/lightbox/js/lightbox.js の49行目あたり
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
を
fileLoadingImage: '/lightbox/images/loading.gif',
fileBottomNavCloseImage: '/lightbox/images/closelabel.gif',
に。
/lightbox/css/lightbox.css の１６行目あたり
#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; }
を
#prevLink:hover, #prevLink:visited:hover { background: url(/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/lightbox/images/nextlabel.gif) right 15% no-repeat; }
にと、画像ファイルのパスを絶対パスで指定する必要があります。
複数の画像ファイルをまとめることも可能です。
aタグに title="～～～" と書くと、Lightboxで表示した際の説明文に表示されます。
コメントする