lightboxを導入してみた
lightboxを導入してみたので、ちょっと実験。
外部サイトでも大丈夫かな？
･･･大丈夫っぽいですね。
さて。
lightboxと言うのは、上の画像をクリックして分かる通り、画像を上乗せ表示するためのスクリプトです。
メリットは画像を表示するのに、別ページに飛ばない事。
デメリットは慣れてないと、画像を消す時にページごと消したり、直前に見ていたページに戻ってしまう事(笑)。
画像をクリックして拡大する画像が多いサイトでは、便利な機能ですね。
lightboxには幾つか種類があるようなのですが、今回使ったのは『jQuery lightBox』。
覚え書きも兼ねて、書き記していきたいと思います。
まずはプラグインそのものが必要ですね。
以下のサイトにアクセスし、lightboxのプラグインをDLしてきます。
jQuery lightBox plugin
画面左側のダンボール箱のようなアイコンをクリックすればDLされるはずです。
私がDLした段階では『jquery-lightbox-0.5』と言う名前のはずです。
DLが完了したら、Zipを解凍しておきます。
解凍が完了したら『js』フォルダ内にある『jquery.lightbox-0.5.js』をテキストエディタで開き、編集をします。
具体的には30-34行目にあるURL部を、自分の環境に合わせて書き換えるわけですね。
私は基本通り『mt/mt-static/』のようにアップロードしているので、そのまま説明を続けます。
30行目の一文だけ抜き出しましたが、以下のような記述になっているので、
imageLoading: 'images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
太字の場所を下のように書き換えます。
imageLoading: '/mt/mt-static/lightbox/images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
同様に、31～34行目まで書き換えていきます。
これで前準備は完了です。
次に、DLしたプラグインをMTにアップロードする作業です。
アップロードするフォルダはどれでも良いみたいですが、今後の事も考えると『mt-static』のディレクトリィが良いようですね。
『mt-static』のディレクトリィ下に『lightbox』と言うディレクトィを作ります。
そうしたら『lightbox』のディレクトリ下に、先ほどDLして解凍済みの『jquery-lightbox-0.5』フォルダの中にある、『css』、『images』、『js』の３つのフォルダをアップロードします。
しかしこれだけでは、プラグインは機能しません。
『HTMLヘッダー』を書き換えてやる必要があります。
『HTMLヘッダー』は、ブログメニューの『デザイン』→『テンプレート』内にある、テンプレートモジュール一覧にあります。
テンプレートを開き、『HTMLヘッダー』に以下の行を追加します。
更に同モジュールの『バナーフッター』内に、以下の行を追加。
基本通りにマニュアル通りにフォルダの名前を変更せずにMTをインストールしていれば、これでいけるはずです。
ただ、このやり方だと、blog内全ての画像にlightboxが適用されるので、外部ストレージなどのhtmlページにリンクしている場合には、画像が表示されなくなったりします。
その場合は別のやり方でlightboxを適用する必要がありますが、割愛。
実際、どちらがいいんでしょうね･･･。