【備忘録】LightView設置

　このBlogでは珍しいMovableTypeネタです・・・

　MTのVerUpに合わせてLightview（画像のサムネイルをクリックしたらそのBlogの上に枠付きで表示するプラグイン(?)です）も入れ直しました。LightView含めLightBox系のツール紹介を見ると、みんな「設置後はa hrefにclass=”lightxxx”と追加するだけです」って書いてるんだけど、今まで書いた記事をどうしろと。

　と探していたらチバのブログさんで自動的にサムネイルぽいリンクにclass=を入れてくれる方法が書いてあったので参考にして設置しました。元のリンクが切れると次回困るのでまるまる自分メモさせてもらいます。

１．作者ページよりLightviewをダウンロード。サイト内に設置。
　　Prototype 1.6.0.2 と Scriptaculous 1.8.1 を用意しなさい、とありますが、今回はGoogle AJAX Libraries APIのを呼び出すので落とす必要無しです。

２．ヘッダに以下のコードを追加

<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>lightview/css/lightview.css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">jQuery.noConflict();</script>

<script type="text/javascript">

    jQuery(document).ready( function() {

        jQuery(".mt-enclosure-image a").addClass("lightview");

    });

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js?load=effects'></script>

<script type="text/javascript" src="<$MTBlogURL$>lightview/js/lightview.js"></script>

　link rel行とscript type行は適時分けた方がいいと思います。lightviewのcssとjsのディレクトリは随時読み替えで。

３．完成
　　簡単過ぎる。ﾅﾝﾃｺｯﾀｲ＼(＾o＾)／

　チバさんも書かれてますが、MT4.x系？から画像のサムネイルタグに不可されているmt-enclosure-imageをフックしてclass=”lightview”を入れているだけなので大昔のMT2,MT3.xで作成したサムネイルには対応してません。
　古いDBからあら無い直して追加するのも面倒なのでいいや・・・

　CODEに改行が入ってますが直すのが面倒なので放置。ｷﾆｼﾅｲ！