ちょっと前からこのブログでも利用させてもらってますが、画像の表示に「Litebox 1.0」というJavaScriptを利用しています。「Litebox 1.0」を利用すると同一ウインドウ内に画像をフェード効果で表示させることができます。Movabletypeで適用する方法を紹介していきます。
まずLiteboxをダウンロードします。
このブログではダウンロードしたファイルを解凍した後、css、images、jsのフォルダをそのままindex.html があるディレクトリにアップロードしましたが、その前に「lightbox.css」「litebox-1.0.js」を少し修正します。
■ダウンロードしたファイル「lightbox.css」「litebox-1.0.js」を修正します。
cssフォルダ内の「lightbox.css」をメモ帳などエディターを使って開きます
「lightbox.css」の48行目と53行目と54行目辺りの三箇所のgifファイルを絶対パスに変更します。
（たとえばhttp://www.boomlabo.net/images/prevlabel.gifといった感じに変更）
jsフォルダ内の「litebox-1.0.js」を同じくメモ帳などで開きます
23行目と23行目の二箇所のgifファイルを絶対パスに変更します。
■css、images、jsのフォルダをindex.htmlがあるディレクトリにアップロード。
■Movabletypeテンプレートの修正箇所 ＜head＞～＜/head＞内に以下を記述します。
<link rel="stylesheet" href="<$MTBlogURL$>css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/litebox-1.0.js"></script>
■bodyの要素にonload 属性を追加します。 太字の部分を追加します。
<body class="○○○-column-○○○" onload="initLightbox()">
■記事内の画像リンクにrel属性値を追加します。
<a href="http://domain/path/to/images/hogehoge.jpg" rel="lightbox"><img src="http://domainpath/to/images/hogehoge_thumb.jpg" /></a>
上記の太字部分（rel="lightbox"）を追加すると画像をクリックした際背景が半透明のブラックになりフェード効果で画像を表示するようになります。
 |
 |
 |
スポンサード リンク
アイコンとウィンドウが飛び回るスクリーンセイバー
パスワードを自動で生成してくれる「SafePasswd」
雪の結晶を作成「Create Your Own Snowflakes」
相関図メーカーで「昼ドラ」を体験しました
MacとWindowsに！おしゃれな時計スクリーンセイバー
「Googleのロゴを作成するFunnyLogo」