MovableTypeにLightviewを導入したので、記録しておきます。
Lightviewは、Lightbox系の画像表示のライブラリですが、先日導入記録を書いたThickboxよりも、随分重くなると思います。内訳は、prototype.js(120k）使うライブラリの為、jquiry.jsに比べると、随分にヘビーになります。
ただ、thickbox.jsとは、違いかなりリッチに出来ています。
エフェクトがスムーズで美しく、角丸やスライドーショーなど、機能が盛りだくさんです。
オプションも多数用意させれていますので、エフェクトが好きで、色々といじりたい人向けのライブラリと思います。
では、インストールmemoです。
手順
ここから、Lightviewをダウンロードする。zipファイルを展開し各ファイルを自分の環境に合わせてアップロード。
その時に、lightview.jsの40行目あたりの、imageへのパスを書き換える必要がある場合があります。
ここから、prototype.js（ver1.6)をダウンロードし、アップロード
ここから、scriptaculous.jsをダウンロードし
展開し、srcフォルダに入っている、scriptaculous.jsとeffects.jsをアップロード
MTのテンプレートファイルに以下コードを記入。
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/lightview.css" />
<script type='text/javascript' src='<$MTBlogURL$>js/prototype.js'></script>
<script type='text/javascript' src='<$MTBlogURL$>js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='<$MTBlogURL$>js/lightview.js'></script>
再構築
Lightviewで表示させたい画像のaタグにrel="lightview"と記入する。表示時にタイトルを表示させたい時は、title="ここにタイトル"を挿入する。
導入momeは以上です。
ここからはMovableTypleのコアをいじっているので注意が必要です。
mt設置ディレクトリの以下、/lib/MT/Asset/Images.pmを編集。
以上箇所を、コメントアウトして
以上を挿入する。
ここでは、titleをファイルネームで取得しているので、○○○.jpgなとになるので、書き直しが必要です。
このtitleを、MTアイテムの名前や説明あたりを参照出来れば便利なんでしょうけど、対応の変数が分からなかったので、諦めました。お分かりになる方、コメント頂けると助かります。
以上は、コアをいじっているので、バージョンアップなどを行うとで改めて書き直しに成るので、プラグイン化をするのが望ましいのですが、気が向けば改めて行いたいと思います。
小粋空間さんのlitebox導入に関するこのエントリーを見ていると、javascriptで、aタグにrel属性を自動挿入しているようです。プラグインを作るより、このアプローチの方が、シンプルで良いかもしれませんね。
特に、使えそうなやつを書いておきます。
・backgroundColor
ウィンドウの背景色を変更することが出来ます。
・border
ウィンヅの余白を変更出来ます。数を大きくすれば余白が広がります。単位はpxのようです。
・buttons
クローズボタンなどのオーバー時の見え方を調整します。
opacity: { normal: 0.65, hover: 1 }
normalが通常時です。画像を65％薄く見せています。
hoverがマウスオーバー時の状態です。ここでは100％に設定しています。
・images
イメージの格納ディレクトリまでの相対パスです。
'../images/lightview/'
・radius
ウィンドウ角丸の半径です。
他にも、スライドショウの秒数など色々と設定出来ますので、試してみてください。
$text = sprintf(
q|<a href="%s"
onclick="window.open('%s','popup','width=%d,height=%d,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0');
return false">%s</a>|,
MT::Util::encode_html( $popup->url ),
MT::Util::encode_html( $popup->url ),
$asset->image_width,
$asset->image_height,
$link,
);以上箇所を、コメントアウトして
$text = sprintf(
q|<a href="%s" rel="lightview" title="%s">%s</a>|,
MT::Util::encode_html( $asset->url ),
MT::Util::encode_html( $asset->file_name ),
$link,
);以上を挿入する。
ここでは、titleをファイルネームで取得しているので、○○○.jpgなとになるので、書き直しが必要です。
このtitleを、MTアイテムの名前や説明あたりを参照出来れば便利なんでしょうけど、対応の変数が分からなかったので、諦めました。お分かりになる方、コメント頂けると助かります。
以上は、コアをいじっているので、バージョンアップなどを行うとで改めて書き直しに成るので、プラグイン化をするのが望ましいのですが、気が向けば改めて行いたいと思います。
小粋空間さんのlitebox導入に関するこのエントリーを見ていると、javascriptで、aタグにrel属性を自動挿入しているようです。プラグインを作るより、このアプローチの方が、シンプルで良いかもしれませんね。
オプション
lightview.jsの32行目あたりを、変更することによって見栄えを色々と変えることが出来ます。特に、使えそうなやつを書いておきます。
・backgroundColor
ウィンドウの背景色を変更することが出来ます。
・border
ウィンヅの余白を変更出来ます。数を大きくすれば余白が広がります。単位はpxのようです。
・buttons
クローズボタンなどのオーバー時の見え方を調整します。
opacity: { normal: 0.65, hover: 1 }
normalが通常時です。画像を65％薄く見せています。
hoverがマウスオーバー時の状態です。ここでは100％に設定しています。
・images
イメージの格納ディレクトリまでの相対パスです。
'../images/lightview/'
・radius
ウィンドウ角丸の半径です。
他にも、スライドショウの秒数など色々と設定出来ますので、試してみてください。
コメントする