画像のポップアップ表示などをページ移動したりページとして別窓で開かず
綺麗に表示してくれるlightBoxはGoogle検索などで探すと多数ヒットし、どれを使えばよいのか悩んでしまいます
このブログではjQueryを使用しているので「jQuery lightBox」にしました
jQuery lightBox plugin ver0.5Movable Type 5.12に設置したお話。

jQuery lightBox plugin ver0.5 設置

jQuery lightBox plugin ver0.5をダウンロード
解凍すると下記ファイル内容になります

jquery-lightbox-0.5(フォルダ)
├CSS(フォルダ)
├images(フォルダ)
├js(フォルダ)
├ptohos(フォルダ *これは使用しません)
└index.html(*これは使用しません)

「jquery.lightbox-0.5.js」通常版と「jquery.lightbox-0.5.min.js」圧縮版
どちらかを使用します修正する箇所もあるので「jquery.lightbox-0.5.js」をお勧めします

ダウンロード後する事

使用するプラグインをサーバーのどこに設置するか決める。
説明では「/mt/mt-static/lightbox/」とします

CSS(フォルダ)内にある「jquery.lightbox-0.5.js」をテキストエディタで開き
30-34行目にあるアイコン等の画像までのURLを修正
変更前
imageLoading:	'images/lightbox-ico-loading.gif',	// (string) Path and the name of the loading icon
imageBtnPrev:	'images/lightbox-btn-prev.gif',	// (string) Path and the name of the prev button image
imageBtnNext:	'images/lightbox-btn-next.gif',	// (string) Path and the name of the next button image
imageBtnClose:	'images/lightbox-btn-close.gif',	// (string) Path and the name of the close btn
imageBlank:	'images/lightbox-blank.gif',	// (string) Path and the name of a blank image (one pixel)
変更後
imageLoading:	'/mt/mt-static/lightbox/images/lightbox-ico-loading.gif',	// (string) Path and the name of the loading icon
imageBtnPrev:	'/mt/mt-static/lightbox/images/lightbox-btn-prev.gif',	// (string) Path and the name of the prev button image
imageBtnNext:	'/mt/mt-static/lightbox/images/lightbox-btn-next.gif',	// (string) Path and the name of the next button image
imageBtnClose:	'/mt/mt-static/lightbox/images/lightbox-btn-close.gif',	// (string) Path and the name of the close btn
imageBlank:	'/mt/mt-static/lightbox/images/lightbox-blank.gif',	// (string) Path and the name of a blank image (one pixel)
修正して上書き保存。

 *絶対パス(http://~)で呼び出すようにしている方も多いようです。

必要であればこちらの修正も jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法

サイトに呼び出しタグ等貼り付ける

jQueryはGoogleAPIから呼び出しています
ヘッダーに
<link rel="stylesheet" type="text/css" href="<$mt:StaticWebPath$>lightbox/css/jquery.lightbox-0.5.css" media="screen">
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7");</script>
<script type="text/javascript" src="<$mt:StaticWebPath$>lightbox/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function(){
$('[rel="lightbox"]').lightBox();
});
</script>
 *ヘッダー上記タグの下でも可能なのですが何故かうちのブログでは反応してくれませんでした
 フッター</body>タグ前あたり5行目から設置すると動作しました

$(‘[rel="lightbox"]‘).lightBox();のrel="lightbox"は画像のリンクタグに入れる物です

<a rel="lightbox"><img画像></a>

例:$(‘.lightbox’).lightBox();のrel="lightbox" の場合
<a class="lightbox"><img画像></a> などなど・・・

ブログ記事で使う

ブログ記事の編集画面の右上にある「画像の挿入」で表示したい画像をアップロードなりして画像を「記事/ページに使用」にチェックを入れ、ブログ記事に画像呼び出しタグを追加します(流れにそっていくと勝手に記事内にタグが入ります)

画像呼び出しタグのリンクタグに「rel="lightbox"」を追加します
変更前
<a href="画像URL"><img alt="画像が表示されない場合表示される言葉" src="元画像のサムネイルURL" width="横幅" height="縦幅" class="mt-image-none" style="" /></a>
変更後
<a rel="lightbox" href="画像URL"><img alt="画像が表示されない場合表示される言葉" src="元画像のサムネイルURL" width="横幅" height="縦幅" class="mt-image-none" style="" /></a>

これで設置完了。下記のように表示できればOK。

Kyanamen

2011/12/22 jQuery, MT5.12
2012/01/08 ,
Comments(1)
関連記事