JQuery版LightboxをMT5.1に導入

  • Web

JQuery版Lightbox

LightboxMovableTypeで本文に画像を表示させようとすると、上のように画像そのものを本文に表示するか、右のように本文にはサムネイルを表示してクリックされたら元のサイズの画像を表示する方法があります。

試しに右のサムネイルをクリックしてみてください。
このサムネイルには別ウィンドウで画像を開くようにしてありますが、通常は画像のみが表示されてブラウザの戻るボタンでしかブログに戻れません

これはイマイチ。
とは言え、できるだけ大きなサイズで見ていただきたい画像や、画像がたくさんある時は、サムネイルで表示しておいた方がページが見やすくなります。

そこで導入したのがLightbox
画像をカッコ良く表示してくれるエフェクトのプラグインです。

以前にもprototype.jsベースのLightboxをこのブログにも導入していたことがありますけど、MT5にアップグレードしてテーマを新しいものに変えた時に外してしまいました。



導入環境

導入した環境は以下の通りです。

  • MovableTypeのバージョン:5.12
  • レンタルサーバ:CORESEVER

Lightboxの導入はそれほど環境に左右されないと思います。

プラグインをダウンロードして

まずは下記からLightboxのプラグインをダウンロードします。2011年9月25日時点のバージョンは0.5です。

jQuery lightBox plugin


ダウンロードしたらファイルを展開します。
「jquery-lightbox-0.5」というフォルダの中に「css」「images」「js」「photo」というフォルダがあります。

このうち「photo」以外の3つのフォルダを任意の場所にアップロードします。
どこでも構わないんですが、MTのバージョンアップなど後々のことを考えると、mtディレクトリのmt-staticにアップロードすれば管理が楽かもしれません。


次に「js」フォルダにある「jquery.lightbox-0.5.js」というファイルをエディタで開きます。
30行目あたりにあるimageLoading〜のURLを、先程設置した「images」のURLに変更します。

imageLoading:'設置したURL/mt-static/lightbox/images/lightbox-ico-loading.gif',		// (string) Path and the name of the loading icon
imageBtnPrev:'設置したURL/mt-static/lightbox/images/lightbox-btn-prev.gif',		// (string) Path and the name of the prev button image
imageBtnNext:'設置したURL/mt-static/lightbox/images/lightbox-btn-next.gif',		// (string) Path and the name of the next button image
imageBtnClose:	'設置したURL/mt-static/lightbox/images/lightbox-btn-close.gif',		// (string) Path and the name of the close btn
imageBlank:'設置したURL/mt-static/lightbox/images/lightbox-blank.gif',			// (string) Path and the name of a blank image (one pixel)

例えば「images 」フォルダをアップロードしたURLが以下の場合、

http://hoge.com/mt/mt-static/lightbox/

1行目のimageLoadingは下記のようになります。

http://hoge.com/mt/mt-static/lightbox/images/lightbox-ico-loading.gif


編集が終了したら、保存して先程の場所に上書きアップロードします。


MTのテンプレート編集

下記の行をHTMLのヘッダー部分に追加します。(アップロード先がhttp://hoge.com/mt/mt-static/lightbox/の場合)

<!-- // lightbox // -->
<script type="text/javascript" src="http://hoge.com/mt/mt-static/lightbox/js/jquery.js"></script>
<script type="text/javascript" src="http://hoge.com/mt/mt-static/lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="http://hoge.com/mt/mt-static/lightbox/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
    $('.gallery a').lightBox();
});
</script>

クラシックブログテーマだと、ブログの「HTMLヘッダー」テンプレートモジュールの最後にペーストすればOK。
青文字の.galleryはLightboxを動作させるためのクラスです。
参照元ではIDを使用していましたが、トップページのように複数のエントリの概要が並ぶ場合を考慮して、私はクラスを使用しました。

もちろんgalleryではなく、任意の名前に変更しても構いません。


表示方法

2通りありますが、私はブログの記事内で画像の部分を<div class="gallery></div>で囲むようにしています。
これなら、記事を書く時にLightboxを適用するかどうか決められます(普通はあまり必要ないですけど)。
画像ごとに囲まなくても、ひとつのdivタグの中に複数の画像を入れることができます。

もうひとつの方法は、このタグをテンプレートに組み込んでしまうという方法です。
過去の記事にも遡ってLightboxを適用できるメリットがあります。

どちらの方法であっても、以前のように画像のURLにrel="lightbox"を付加する必要はありません。


参考にさせていただいたサイト

jQuery で Lightbox のように表示する:Movable Type 備忘録
Movable TypeでjQuery lightBoxプラグインを使う:The blog of H.Fujimoto

コメントをどうぞ

コメントする

※ コメントは認証されるまで公開されません。ご了承くださいませ。

公開されません

(いくつかのHTMLタグ(a, strong, ul, ol, liなど)が使えます)


画像の中に見える文字を入力してください。

About

近藤彰宏のWebサイトにようこそ!

プロフィール

起業コンサルタント

何か自分の得意なことで世の中の役に立ちたい!・・・そんな想いで起業した方、これから起業したいと思っている方をお手伝いします。
コンサルティングのモットーは「誰かの成功法より自分の正攻法」。成功法則オタクを卒業して、自分のやり方を見つけましょう!
起業を志す方に、業務内容に応じたIT活用と、タスク管理術をコンサルティングします

1972年10月生まれ
ゆるワクTVパーソナリティ&放送オペレーター
全脳思考ファシリテーター
趣味はゴルフ・ボウリング・草野球

その他の主催イベントなど

ゆるワクTV

起業家をゲストにお迎えして、ゲストのテーマに沿ってビジネスへの想いを引き出すUstreamトーク番組

全脳思考イントロダクション講座

カリスマ経営コンサルタント神田昌典氏が開発した「全脳思考」
3時間でその思考法を手に入れる講座

中部全脳カフェ

誰でも氣軽に全脳思考を体験できる、講座ではない氣軽な集まり

悠久マスターズ

ゴルフと全脳思考をハイブリッドした、遊びの中から新しいビジネスのヒントを得る体感型セミナー

サイト内検索

カテゴリ

最近のピクチャ

  • ステッドラー トリプラス
  • facebookページSSL対応
  • facebookからのメール
  • Lightbox
  • zenback_01.png
  • fb_likebox_10.png
  • 110914_01.png
  • 110913_01.jpg

Twitter

最近のコメント