Movabletypeのサムネイルを自動でlightbox風にできる方法

| カテゴリ/ CMS, カスタマイズ・小技 | ブックマークに追加する

忘れるといけないのでメモ程度に残しておきます。
movabletype4.1に実装しました。

lightwindow1.png


実際には、lightboxではなく、lightwindowを使いました。
lightboxを導入しようと何度か挑戦してみましたが、何故かスクリプトエラーが連続するので
断念して、lightwindowにしてみたら何故かできた。という経緯から。

1.まずは、lightwindowをダウンロードします。

Lightwindow2.0v
http://www.stickmanlabs.com/lightwindow/

フォルダを解凍してそのままアップします。
自サーバー上でディレクトリがどうなるのかきっちり覚えておくと間違いがないと思います。

2.Lightwindowを実行させるための下準備


「Lightwindow.Js」というファイルにおける
画像を読み込むための相対パスを絶対パスに書き換えます。

くわしくは、こちらのサイトを参考にしました↓
http://cybermax.jp/2008/10/mt42-lightwindow-20.html

そして、MTの<head>内に、
lightwindowを読み込ませるためのスクリプトやらCSSやらのファイルへのパスを入力します。

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

これで普通にlightwindowが起動するようになります。
次に、自動化作業。

3.自動的にサムネイルを押すとlightwindowが立ち上がるようにするために


MTディレクトリ中の「mt/lib/MT/Asset/Image.pm」を書きかえします。

デフォルトでは、このようになってます↓ので、

'<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 ),


このように書き換えます↓(324行目あたり)

'<a href="%s" class="lightwindow" rel="[gallery]" title="%s" caption="%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( $asset->description ),
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $thumb->url ),


ちなみに、デフォルトのMTには、bodyタグの部分にonloadの記述が書かれているので
こいつを一端消して、bodyタグ終了直前に移動させます。(スクリプトがぶつかる?こともあるらしいので)

http://www.koikikukan.com/archives/2006/01/15-235506.php

lightboxの事例のようですが、lightwindowでも同様かなぁと思って
採用しました。

このサイトでは、とりあえずこんな手順で動くようになりました。

classに対して、lifhtwindow、relには、gallery(※何でもいいらしいが、日本語は文字コードの関係もあって危険らしい)と
つるけることで何個か画像を上げると、lightwindow内で連続して動くようになりました。
lightwindowでは、動画やフラッシュ、webページも読み込めるのでlightboxよりも色々とできそうです。

話は変わりますが、タグもこんな感じ↓で動いているものもあるようなので
導入できればなぁと思っています。(ワードプレスしか対応してないようですが・・・)

tag0309.png

 





トラックバック(0)

このブログ記事を参照しているブログ一覧: Movabletypeのサムネイルを自動でlightbox風にできる方法

このブログ記事に対するトラックバックURL: http://www.monkeychop69.com/mt/mt-tb.cgi/672

コメントする