- 2009年5月 8日 19:49
- GX100 | Movable Type
正確にはLightbox2.04 を Movable4.25で使う。
画像のポップアップを格好良くするJavascriptです。
参考にしたサイトは、
（Lightbox2.04 だと、上記の設置方法では動作しないので注意してください）
設置方法
（設置場所などの環境によって多少変わります）
- Lightbox.js パラメーターの編集
- Image.pm を編集
- ファイル群をput
- スタイルシートの編集
- 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 ] を設置場所とした。
- スタイルシートの編集
現時点で最新の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 あたりの表示がおかしい）
- Newer: これ便利です
- Older: まだ続いてたんですね
Comments:0
Trackbacks:0
- TrackBack URL for this entry
- http://www.ryujimatsuda.com/mt/mt-tb.cgi/241
- Listed below are links to weblogs that reference
- Lightbox Movable 設置 備忘録 from Ryuji Matsuda Weblog
