Movable Type Archive - Ryuji Matsuda Weblog

Home > IT,Web > Movable Type Archive

Movable Type Archive

Lightbox Movable 設置 備忘録

RIMG2622_R_R.jpg
正確にはLightbox2.04 を Movable4.25で使う。
画像のポップアップを格好良くするJavascriptです。
http://www.lokeshdhakar.com/projects/lightbox2/

参考にしたサイトは、

(Lightbox2.04 だと、上記の設置方法では動作しないので注意してください)

スクリプトが正常に起動しないため、さらに参考にしたサイトは、


設置方法
(設置場所などの環境によって多少変わります)

  1. Lightbox.js パラメーターの編集
  2. Image.pm を編集
  3. ファイル群をput
  4. スタイルシートの編集

  • Lightbox.js パラメーターの編集
fileLoadingImage 「読み込み中を示す画像URL」
fileBottomNavCloseImage 「CLOSEボタンの画像URL」
overlayOpacity 「背景の不透明度)1で黒」
animate 「リサイズ時のアニメーション(true:アニメーションする、false:しない)」
resizeSpeed 「リサイズ時の速度(1:低速、10:高速)」
borderSize 「枠のサイズ(余白)」

最低限、下記の項目は修正する必要がある。
fileLoadingImage
fileBottomNavCloseImage
設置ファイルのパスを環境にあったものに変更する。

  • mage.pm を編集
ここは参考サイトの通りしました。2箇所修正。
ブログに写真を貼り付けたら、自動的にlightboxが適用するようになる。
(要は自動で「rel="lightbox」を記述するようにするため。)
必要なければこの項目は不要。

Image.pmの場所は、
mt>lib>MT>Asset>image.pm

1箇所目
修正前
<a href="%s"><img alt="%s" src="%s" %s %s /></a>
修正後
<a href="%s" rel="lightbox"><img alt="%s" src="%s" %s %s /></a>

2箇所目修正前
$text = sprintf(
'<img alt="%s" src="%s" %s %s/>',
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $asset->url ),
$dimensions, $wrap_style,修正後
my $thumb_width = $param->{thumb_width}; my $scale = $asset->image_width / $thumb_width; $dimensions = sprintf( 'width="%s" height="%s"', (( $asset->image_width / $scale, $asset->image_height / $scale )) );
$text = sprintf(
# '<img alt="%s" src="%s" %s %s />',
# MT::Util::encode_html( $asset->label ),
# MT::Util::encode_html( $asset->url ),
'<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( $asset->url ),
$dimensions, $wrap_style,

  • ファイル群をput
編集が終われば、上記で編集した環境(パス)に合致するフォルダに設置する
私の場合は、他のサイトを参考にして、
[ /mt/javascript/lightbox ] を設置場所とした。



  • スタイルシートの編集
ここで引っかかる。2.04独自の記述が必要。
現時点で最新のlightbox2.04を設置しようとすると、今までの方法ではスクリプトが起動しない。
さらに参考にしたサイトから引用して、
私の場合は、以下とすることで、起動しました。

テンプレートモジュールのHTMLヘッダーに記述。
<script type="text/javascript" src="/mt/javascript/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/mt/javascript/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/mt/javascript/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/mt/javascript/lightbox/css/lightbox.css" type="text/css" media="screen">



以上

再構築すれば完了。

グループ表示する場合は新記述カッコ内を統一する。
例:「 rel="lightbox[ここにグループ名]" 」

以上の説明は、分かりづらいかもしれませんが、備忘録として要点のみを記述しています。

あくまでも私の環境の「lightbox2.04」、での動作確認です。
それ以外の環境やバージョンでは、また違った不都合があるかもしれません。
(アーカイブ系のページであるかもしれません)
(Googlechromeで見たときcloseのgif あたりの表示がおかしい)

MEMO MovableType 次ページ処理

movablezanpai.jpeg
惨敗です。挫折です。
見てください。このアクセス数。9割5分は自分で踏んでます。
(ビール飲んで、うひーのプロフィール画像です)


ほんと難しいっすわー。
なんなの、これ。
みんなのサイトを参照しながら設定してるけど、タグとか全然わかんないし。笑
なんとなくこういう意味だろうなーって、ここまで来ましたが、やっぱりマニュアル本が必要なのでしょうか。

次ページ処理するのに「MTPaginate」を導入しようと思ったところまでは、良かったのですが。
いっこうに前に進みません。
進むどころか、プラグインフォルダにアップロードするとmt.cgiがスクリプトエラー。
あああああああああ!

もう疲れたので、やめます。次ページ処理を次ページ処理します。
なんのこっちゃ。

やっぱりはじめから理解しないと難しいようです。

当面の課題は、
1.MTの構成を理解すること
2.MTタグを理解することと
3.MTプラグインを理解すること
(ある意味この3つは必須だろ!って自分に突っ込み入れます)

備忘録
http://bizcaz.com/archives/2006/02/08-225445.php
http://m.nj-clucker.com/2008100823.php
http://www.koikikukan.com/archives/2006/04/20-005555.php
http://30smash.main.jp/mt/customize3/post_44.html

MovableType4.25 DEBUT

movable01.jpeg
完全に見切り発車です。
フライングですが、公開します。
ココログから 自サーバー レンタルサーバーでMovableType設置に引っ越しです。
サイトデザインとかカテゴリーなど、微調整していきたいところが、山ほどあります。
難しいですね。途中で心が折れそうになったけど、ようやくここまで来ました。

めっちゃ疲れました。

そーそー。
ついでにドメイン取得したので、ryujimatsuda.com の方も、整理したいなと思い始めています。
どんどんやることが拡大していって、収集がつかなくなってるけど・・・・。

まぁ、今後のWeb関連の知識になればと、自分を慰めることにします。

この経験をもとに、僕みたいな初心者向けMovableType設置記事とか書いてみようと思います。
初心者がもっと簡単に設置できたらいいのにね。

では。
1

Index of all entries

Home > IT,Web > Movable Type Archive

Search
Feeds
Tag Cloud

Return to page top