Lightboxを使ってみる

設定の概要は

Lightbox２のダウンロード

解凍してできたフォルダーの中の/js/lightbox.jsを編集

 var fileLoadingImage = "images/loading.gif";  
var fileBottomNavCloseImage = "images/closelabel.gif";

修正後
var fileLoadingImage = "http://MTのドメイン/lightbox/images/loading.gif";  
var fileBottomNavCloseImage = "http://MTのドメイン/lightbox/images/closelabel.gif";

LightboxフォルダーをＭＴのルートにアップロードする

ヘッダーモジュールテンプレートにＣＳＳへのリンクを追加

<link rel="stylesheet" href="<$MTBlogURL$>lightbox/css/lightbox.css" type="text/css" media="screen" />

mt/lib/MT/Asset/Image.pm を編集

MT4.01
246行目をコメントアウト、247行目に追加
MT4.1
314行目をコメントアウト、315行目に追加

# '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',

'<a href="%s" rel="lightbox"><img alt="%s" src="%s" %s %s /></a>',

 
MT4.01
256行目以降に追加・コメントアウト
MT4.1
324行目以降に追加・コメントアウト

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