遅ればせながら小粋空間さんで紹介されていたLightbox JSを導入してみました。
基本的な導入方法は既に紹介されていますので、ほんの少しだけ応用して導入してみようと思います。
元記事はこちら・・・小粋空間：Lightbox JS で画像を表示する
左はMovableTypeの標準機能のポップアップで、右がLightbox JSの動作です。
1．スクリプトの入手
まずは本家サイトでスクリプトを入手します。・・・Lightbox JSダウンロードするファイルはJavaScriptのファイルとスタイルシート、そして画像ファイルが3つです。
2．ファイルの修正
ダウンロードしたファイルをアップロードする前に修正します。
当サイトのテンプレートでは、MovableType標準以外のJavaScriptはすべてstyle.jsというファイルにまとめてありますので、そのファイルにダウンロードしたファイルのスクリプトをコピペします。
で、保存する前に「loading.gif」と「close.gif」を検索で探して、http://～からのURL表記に変更します。
当サイトではオリジナルテンプレートで使用する画像などを、すべてトップページと同じ階層にあるstyleディレクトリに配置するので下記の表記になります。
var loadingImage = 'http://publicity.jp/mt-note/style/loading.gif';
var closeButton = 'http://publicity.jp/mt-note/style/close.gif';
スタイルシートも同じく既存のスタイルシートにコピペして追加します。
こちらも保存する前に「overlay.png」（2箇所）をURL表記に変更します。
3．ファイルのアップロード
JavaScriptファイルとスタイルシート、画像ファイル3つをstyleディレクトリにアップロードします。 また、JavaScriptとスタイルシート共に既存のファイルに追加してますので、テンプレート自体の修正は行う必要がありません。4．使い方
画像へのリンクにrel="lightbox"を追加します。サンプル画像のソースは下記の通りです。MovableTyle標準
<a href="http://publicity.jp/mt-note/archives/photo/060120_01.php"
onclick="window.open('http://publicity.jp/mt-note/archives/photo/060120_01.php',
'popup','width=600,height=400,scrollbars=no,resizable=no,toolbar=no,
directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">
<img src="http://publicity.jp/mt-note/archives/photo/060120_01-thumb.jpg"
width="180" height="120" alt="" /></a>
Lightbox JS
<a href="http://publicity.jp/mt-note/archives/photo/060120_01.jpg" rel="lightbox"><img src="http://publicity.jp/mt-note/archives/photo/060120_01-thumb.jpg" width="180" height="120" alt="" /></a>
コメントをどうぞ