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のコアをいじっているので注意が必要です。
MovableTypeにLightviewを導入の続きを読む
