画像をかっこよく表示－lightbox－

lightbox2.04を使用します。lightboxのバージョンやMTのバージョンが違うと若干カスタマイズ部分が違ったりします。

今回テストしてみたのは、MT4.23,4.24,3.34です。
なんで、3.34があるかというと、サーバ仕様とかの問題でアップグレードできないサイトに入れる必要があったため、たまたまやってみたためです。

lightboxの設定手順

1. まず、lightbox2.04をダウンロードしてきます。適当な場所に解凍してください。
2. 解凍したら、[ js ]フォルダの中にあるlightbox.jsをエディターで開いて、50,51行目付近のコードを下記のように変更します。
   fileLoadingImage: 'MT本体のサイトパス/lightbox/images/loading.gif', fileBottomNavCloseImage:'MT本体のサイトパス/lightbox/images/closelabel.gif',
   "MT本体のサイトパス"　は、　http://～　のＵＲＬを記述します。
3. 上書き保存したら、解凍したフォルダーをlightboxという名前にし、MT本体がある場所へアップロードします。
4. 次にＭＴ側のテンプレートにコードを追加します。
   ヘッダー内（＜head＞～＜/head＞）の間、もしくはテンプレート：HTMLヘッダーに記述します。
   モジュール化してもよいです。解凍したときに一緒に入っていた index.html に記述されている８行目からの下記のコードを以下のように変更して記述します。
   <link rel="stylesheet" href="<$MTBlogURL$>lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>lightbox/js/lightbox.js" type="text/javascript"></script>
5. あとは、ブログ記事の画像ソースに　rel="lightbox" を付け足すだけです。
   <a rel="lightbox" href="URL/images/xxxxx.JPG"> <img src="URL/images/xxxxx-thumb.JPG" width="160" height="120" alt="test" /> </a>

[rel="lightbox"]を自動で挿入させるカスタマイズ（for  MT4.23, 4.24）

（MTのディレクトリ）/lib/MT/Asset/Image.pm を改造します。
Image.pm　を開いて、300～400行目あたりの下記部分に　rel="lightbox" を追記します。

これで、画像をアップロードする際にサムネイルでアップするとソース内に　[ rel="lightbox"] が追加されます。
※ポップアップのときは通常通り、ページリンクしたポップアップ表示になります。

[rel="lightbox"]を自動で挿入させるカスタマイズ（for  MT3.34）

（MTのディレクトリ）/lib/MT/App/CMS.pmを改造します。
ＣＭＳ.pm を開いて、4814 4841行目あたりの a  タグ部分に　rel="lightbox"を追記します。

これで、画像アップロード時に、埋め込みを選択すると　[rel="lightbox"]が追加されます。