Movable Type 備忘録
サムネイルをLightbox JSで表示してみる
- Next Page: エントリの訂正をカンタンにする
- Prev Page: MovableTypeのコメント欄の色を交互に変えてみる
MovableType(ムーバブルタイプ)では、標準で元イメージをサムネイルにしてくれる機能が備わっています。 とはいっても、Image::Magickというソフトウェアが必要なようです。つか、レンタル・サーバーでサイト管理している人はあまり気にしなくても良さそう♪
Image::Magickの話は(よく分からないので)さらぁ~と流して、今日はLightbox.jsによるサムネイル・イメージの表示にチャレンジしてみたいと思います。
Lightbox.jsは、サムネイルをクリックすると、元の大きさのイメージを同じウィンドウに表示してくれるJAVAスクリプトです。
ポップアップなどで表示されないし、ページの移動もされず、見た目的にもかなりGOODですよ。
サンプルとして、左のイメージ(わたしの相方)をクリックしてみてください。
Lightbox.jsは、MovableType(ムーバブルタイプ)以外でも使用できます。
今回参考にしたサイトは、magnet:.. 様と、Lightbox JS本家です。
▼Lightbox.js v2.0の入手はこちらから▼
http://www.huddletogether.com/projects/lightbox2/
カスタマイズ方法
まず、Lightbox.jsをダウンロードします。
上記URLから圧縮ファイルをダウンロードします。 そして、適当なフォルダに展開してください。次にjs/lightbox.jsを修正します。
js/lightbox.jsの修正内容は以下の通りです。62行目 修正前 var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif"; 修正後 var fileLoadingImage = "http://●●●.com/lightbox/images/loading.gif"; var fileBottomNavCloseImage = "http://●●●.com/lightbox/images/closelabel.gif";各自の環境に合わせて青い字の部分を修正します。
修正したらサーバーにアップロードします。
アップロード先はどこでも構いませんが、ここでは上記例の場所にアップロードするものとして説明します。まず、index.htmlと同じ場所にlightboxディレクトリを新規作成してください。
そして、そのディレクトリの中にcss、images、jsフォルダをそのままアップロードします。これでLightboxの設置は完了です。
次にスタイルシートの修正を行います。
わたしは、既存のスタイルシートstyles-site.cssの中にcss/lightbox.cssをインポートするよう、以下のように追加しました。@import url(<$MTBlogURL$>lightbox/css/lightbox.css) screen;各テンプレート内に個別に追加する場合は、以下の1行を<head>~</head>の間に追加します。
<link rel="stylesheet" href="<$MTBlogURL$>lightbox/css/lightbox.css" type="text/css" media="screen" />最後にテンプレートを修正します。
修正するテンプレートは、メイン・インデックス、個別アーカイブなど、エントリが表示されるテンプレートが対象となります。
<head>~</head>の間に以下のコードを追加します。<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="<$MTBlogURL$>lightbox/js/lightbox.js"></script>追加したら保存して再構築します。
以上で一通りLightbox JSの準備ができました。
Lightbox JSでサムネイル画像を表示させるには、以下のようにします。
<a href="http://●●●.com/image/▲▲▲.jpg"
rel="lightbox"><img src="http://●●●.com/image/▲▲▲-thumb.jpg" width="150" height="200" alt="" /></a>
青い字の部分を付け加えることで、Lightbox JSが実行されるようです。
毎回入力するのが面倒な人は、以下の手順でサムネイル作成時に自動で付け加えることができます。
CMS.pmを編集します。
mt/lib/MT/App/CMS.pmをテキストエディタで開いてください。
そして、以下のように修正します。
3604行目
修正前
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
修正後
<a href="$url"
rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
3608行目
修正前
<a href="$url" ><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
修正後
<a href="$url"
rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
青い字の部分を追加します。
修正したら保存してサーバーにアップロードしてください。
以上で、デフォルトで
rel="lightbox"
を付加させることができました。
どうですか!? 見栄えいいでしょ♪
では、SEE YOU♪
- 2007.10.07 追記 -
scriptaculous.js の最新バージョンは 2007.10.07 時点で ver1.7.0 ですが、このバージョンでは lightbox2 は正しく動作しませんでした。
いろいろ調べたところ ver1.5.3 までは動作確認済みです。
Trackback Pings(7)
- from
huddletogether
Lightbox 2を利用する Lightbox JS v2.0 を導入 Lightbox jsのネタ まとめ Ajax なロード時のアニメーションGIF...
- from
TRANS
というのを実装してみた。サンプルは自分のサイトに設置しているが、まだコンテンツが不十分で、ネットで公開できないレベルなので、コードだけ説明しておく。ちな...
- from
juggernauts website
movabletype使ってないヒトにはまったくなんの苦労話か理解できひんやろうけど、"lightbox.js"とケータイからの投稿をうまく組み合わせるの...
- from
annex@K's flower
annex@K's flowerでも使用しているJavaScriptの“Lig...
- from
Web*Lav
Movable Type,Javascript,Lightbox,Web Design,Photograph
- from
MovableType備忘録
こんにちわアル~(●´∀`●)♪ わたしのトップページのサイドバーに左図のようなメニューを設置してみましたの。 カッコ良くない (>∀< )!? Lig...
- from
My Web Diary
...
Comments(2)
- #2: Posted by bzbell [RES]
>>1 magnet さん
こんにちわ^^
> RSSの登録もさせて頂きました。
ありがとうございます。> 今後ともいろいろ情報交換できたら良いですね^^
はい♪かなり嬉しいです。
ちょくちょく寄らせていただきます。> ヨロシクお願いします!
こちらこそよろしくです。


こんにちは^^ TB&コメントありがとうございます。
RSSの登録もさせて頂きました。
今後ともいろいろ情報交換できたら良いですね^^
ヨロシクお願いします!