Ajaxの最近のブログ記事

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のコアをいじっているので注意が必要です。

ThicBoxを導入してみました。(画像は内容とは関係ありません）

参考にしたサイトは

• ThickBox（オフィシャル）

• Hybrid Style Design. BLOG :: Movable Type 4とThickBox

• 画像を挿入したときにformタグがつく理由

同等機能の元祖ライブラリに、LightBoxというものもあります。
ThickBoxとの違いは、

• LightBoxは開くときにちょっとしたアニメーション付き。（ThickBoxはない）
• ThickBoxはhtmlなんかも開ける。

（1/23追記：現在は、このThickBoxを使用しておりません。）

[ajax] JKL.ParseXML／ajax通信処理ライブラリ 非常に便利なajaxライブラリです。xmlを読み込みjavascriptオブジェクトに変換してくれます。クロスブラウザに対応してくれています。 今回は、とあるサイトで静的なページにブログ概要を抜粋したものをいてて欲しいと言う要望に答えるべく、また利用させて頂きました。