MovableType3.2にLightbox Plusを入れてみる

Date: 2006-02-24 (金)
Category: MovableType関連

画像をクールに見せるためのスクリプトLightboxに拡張機能が追加されたLightbox PLUSをMT3.2に組み込んでみた。
ここではあまり画像を貼る事はないんですが今後どう展開していくか自分でも分からないので (ﾟoﾟ)

下記記事を参考にさせて頂きました♪
脳無しの呟きさん：： Movable Type 2.x にて Lightbox JS を採用してみる
 脳無しの呟きさん：： Lightbox Plus を導入
 小粋空間さん：： Lightbox JS の Movable Type での不具合を修正する

lightbox_plus.js 418行目-画像のパスをhttp://から始まる絶対パスに変更

loadingimg:'loading.gif',
expandimg:'expand.gif',
shrinkimg:'shrink.gif',
effectimg:'zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
closeimg:'close.gif'

↓はimagesディレクトリに置いた例

loadingimg:'http://example.com/images/loading.gif',
expandimg:'http://example.com/images/expand2.gif',
shrinkimg:'http://example.com/images/shrink.gif',
effectimg:'http://example.com/images/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
closeimg:'http://example.com/images/close.gif'

lightbox.css 8行目と20行目の画像パスも同じく絶対パスに変更

#overlay {
background-image: url(overlay.png);
}
･･
･･
* html #overlay {
background-color: #000;
background-image: url(blank.gif);
filter: Alpha(opacity=50);
}

↓

#overlay {
background-image: url(http://example.com/images/overlay.png);
}
･･
･･
* html #overlay {
background-color: #000;
background-image: url(http://example.com/images/blank.gif);
filter: Alpha(opacity=50);
}

変更が完了したらMTの管理画面からテンプレートの新規作成でlightbox_plus.jsとlightbox.cssと言うファイル名でそれぞれ作成。
当然FTP等を使用してMTのルートディレクトリにアップロードしても良い。
その後管理画面から各テンプレート（メインページや個別アーカイブ）に下記タグを追加

<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" />
<script language="javascript" type="text/javascript" src="<$MTBlogURL$>lightbox.js"></script>

最後に私の環境では再現しなかったのですがエントリー・アーカイブはonloadイベントハンドラとの競合で正常に動作しないという例もあるみたいです。
テンプレート/個別エントリー･アーカイブ

<body class="…" onload="individualArchivesOnLoad(commenter_name);>

青地部分を削除してテンプレートの最後に下記のコードを追加

<script type="text/javascript">

</script>

上記カスタマイズが完了すれば画像を添付する際 rel="lightbox" を追加することによりクールに見せられます。
<a href="http://example.com/images/winter.jpg" rel="lightbox">
手動でその都度入れるのが面倒な場合は下記ファイルをカスタマイズしておくと便利です。
MTルート/lib/MT/App/CMS.pm 3604行目付近(私のは結構弄っているので違うと思います)

<a href="$url" rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="0" hspace="15" vspace="5" align="right" /></a>

青地部分を追加するだけです。

Comment:5

しげる:2006-03-27 (月) 03:16

はじめまして。

こちらのサイトを参考にLightbox PLUSをMT3.171-jaに組み込んだところ、winならIEでもFireFoxでも問題なく作動するのですが、macのIEですとブラウザ自体が強制終了してしまいます。。。

どこが問題なのか分りますでしょうか？？

しげる:2006-03-27 (月) 03:20

あっ。。。ちなみにLightbox PLUSの導入と同時に「MovableType テキストの回り込み処理」もこちらのサイトを参考に行っております。。。

しげる :2006-03-27 (月) 03:23

度々すみません。。。
一応、問題になっている自分のサイトのURLを記しておきます。

http://sea.mori-umi.net/

kecha :2006-03-27 (月) 20:43

しげるさんはじめまして。
コメント有難うございます。せっかくコメント頂いて申し訳ないのですが当方Macの環境を持ち合わせておらず又､Macについては知識すら殆どありません。
Google等で色々調べてみたのですがこれと言った回答を導き出すことが出来ませんでした。

もし宜しければこのハックをもともと紹介されている｢Movable Type 2.x にて Lightbox JS を採用してみる｣もしくは小粋空間さんの｢Lightbox JS で画像を表示する｣の記事でお聞きになられれば解決されるかもしれません。

こんなコメントしか出来なく本当に申し訳ございません (:_;)

しげる :2006-03-28 (火) 00:38

kechaさん、ありがとうございます。

上記２サイトも見ましたが、このサイトの説明が一番分りやすかったので参考にさせて頂きました。

早速、小粋空間さんor脳無しの呟きさんにて聞いてみます。
それでは。

Trackback:0

TrackBack URL for this entry: http://mynoah.net/mt-tb.cgi/118
Listed below are links to weblogs that reference: MovableType3.2にLightbox Plusを入れてみる from おじさんの備忘録

Return to Page Top