「WordPressで学ぶPHP(4)通信編」を発売しました。
本書は、「WordPressで学ぶPHP(1)変数・制御構造編」「WordPressで学ぶPHP(2)データ構造編」「WordPressで学ぶPHP(3)関数編」の続編にあたり、Webブラウザとサーバー(PHP)との通信と、PHPから他のサーバーに通信することについて解説します。
Movable TypeでjQuery lightBoxプラグインを使う
以前に書いた「ブログ簡単パワーアップ Movable Type4 スーパーカスタマイズテクニック」という本の中で、Liteboxを使って画像を表示する方法を紹介しました。
この件に対し、「Movable Type 5でLiteboxを使うにはどうすれば良いのか」というご質問をいただきました。
Liteboxはprototype.jsベースのJavaScriptですが、現在ではjQueryを使うことが多いかと思います。
そこて、Liteboxの代わりに、jQueryのlightBoxプラグインを使う方法を紹介します。
なお、クラシックブログテーマを使ってカスタマイズを行いますので、その他のテーマをお使いの方は、カスタマイズ先のテンプレート等を適宜読み変えてください。
1.jQuery lightBoxプラグインのダウンロード
まず、以下のリンクからjQuery lightBoxプラグインをダウンロードします。
ダウンロードが終わったら、そのZipファイルを解凍しておきます。
2.jQuery lightBoxプラグインのアップロード
次に、jQuery lightBoxプラグインを、ご自分のMovable Type環境にアップロードします。
Movable Typeのインストール先にある「mt-static」ディレクトリの中に、「lightbox」というディレクトリを作ります。
そして、先ほど解凍しておいた中から、「css」「images」「js」の3つのフォルダを、上で作った「lightbox」ディレクトリの中にアップロードします。
3.「HTMLヘッダー」テンプレートモジュールの書き換え
jQuery lightBoxプラグインを使うには、まずHTMLのヘッダー部分に、lightBoxプラグインのJavaScriptとスタイルシートを読み込む行を追加します。
クラシックブログテーマだと、ブログの「HTMLヘッダー」テンプレートモジュールの最後に以下を追加すれば、lightBoxプラグイン関係のファイルを読み込むことができます。
<script type="text/javascript" src="<$mt:StaticWebPath$>jquery/jquery.min.js"></script> <script type="text/javascript" src="<$mt:StaticWebPath$>lightbox/js/jquery.lightbox-0.5.min.js"></script> <link rel="stylesheet" type="text/css" href="<$mt:StaticWebPath$>lightbox/css/jquery.lightbox-0.5.css" media="screen" />
4.「バナーフッター」テンプレートモジュールの書き換え
最後に、HTMLの最後の方に、jQuery lightBoxプラグインを実行するための処理を追加します。
クラシックブログテーマだと、ブログの「バナーフッター」テンプレートモジュールの最後に以下を追加すれば、lightBoxプラグインを実行することができます。
<script type="text/javascript"> $(document).ready(function() { $('#alpha a:has(img)').lightBox({ imageBlank: '<$mt:StaticWebPath$>lightbox/images/lightbox-blank.gif', imageLoading: '<$mt:StaticWebPath$>lightbox/images/lightbox-ico-loading.gif', imageBtnClose: '<$mt:StaticWebPath$>lightbox/images/lightbox-btn-close.gif', imageBtnPrev: '<$mt:StaticWebPath$>lightbox/images/lightbox-btn-prev.gif', imageBtnNext: '<$mt:StaticWebPath$>lightbox/images/lightbox-btn-next.gif' }); }); </script>