Light box2をMovable Type4に入れる（タグ自動挿入）　D-log

« マルチブログ(Multi blog) for MT4 | | 特定のカテゴリーを出力しないプラグイン MT (FilterCategories) »

Light box2をMovable Type4に入れる（タグ自動挿入）

どうもDです。

今回MT4にlightbox2を使用する際にサムネイル表示させるとightboxのrel="lightbox"を自動で挿入する方法を書いておきます。

下記からファイルをゲットします。
http://www.huddletogether.com/projects/lightbox2/

1．ファイルをアップロード後、head内に下記の記述を追加

<link rel="stylesheet" href="<$MTBlogURL$>/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>/lightbox.js"></script>

2．MTがインストールされているフォルダないの下記パス参照
mt/lib/MT/Asset/Image.pm

3．Image.pmを開いて300～400行あたりの間に下記タグがあるので修正します。（太字参照）

        else {
            if ( $param->{thumb} ) {
                $text = sprintf(
                    '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
                    MT::Util::encode_html( $asset->url ),
                    MT::Util::encode_html( $asset->label ),
                    MT::Util::encode_html( $thumb->url ),
                    $dimensions,
                    $wrap_style,
                );
            }
            else {
                $text = sprintf(
                    '<img alt="%s" src="%s" %s %s />',
                    MT::Util::encode_html( $asset->label ),
                    MT::Util::encode_html( $asset->url ),
                    $dimensions, $wrap_style,
                );
            }

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

        else {
            if ( $param->{thumb} ) {
                $text = sprintf(
                    '<a href="%s" rel="lightbox"><img alt="%s" src="%s" %s %s /></a>',
                    MT::Util::encode_html( $asset->url ),
                    MT::Util::encode_html( $asset->label ),
                    MT::Util::encode_html( $thumb->url ),
                    $dimensions,
                    $wrap_style,
                );
            }
            else {
                $text = sprintf(
                    '<img rel="lightbox" alt="%s" src="%s" %s %s />',
                    MT::Util::encode_html( $asset->label ),
                    MT::Util::encode_html( $asset->url ),
                    $dimensions, $wrap_style,
                );
            }

これで画像をアップロードする際にサムネイルでアップすると勝手にソース内に「rel="lightbox"」が追加され、嫌でもlightboxが発動します。JSファイルのlightbox.jsの中パスを少しいじった方がいいです。

下記を修正するとローディングがきちんと表示されるでしょう。
65行目：var fileLoadingImage = "http://URL/lightbox/images/loading.gif";
66行目：var fileBottomNavCloseImage = "http://URL/lightbox/images/closelabel.gif";
204行目：<img src="http://URL/lightbox/images/loading.gif">
217行目：<img src="http://URL/lightbox/images/close.gif">

こんな感じです。

好きな人と思い合っていても一緒にいられないって悲しいですね。
そりゃ海はこえれねーや・・・　ん？こえれるのかな？

日時: 2008年10月 8日 11:57 | パーマリンク