Movable Type 備忘録

 サムネイルをLightbox JSで表示してみる

  • May042006
  • Vote:
    http://bizcaz.com/archives/2006/05/04-024443.php
  • Categories: Customize
  • Tags:
  • Social Bookmark

MovableType(ムーバブルタイプ)では、標準で元イメージをサムネイルにしてくれる機能が備わっています。 とはいっても、Image::Magickというソフトウェアが必要なようです。つか、レンタル・サーバーでサイト管理している人はあまり気にしなくても良さそう♪

Image::Magickの話は(よく分からないので)さらぁ～と流して、今日はLightbox.jsによるサムネイル・イメージの表示にチャレンジしてみたいと思います。

Lightbox Lightbox.jsは、サムネイルをクリックすると、元の大きさのイメージを同じウィンドウに表示してくれるJAVAスクリプトです。
ポップアップなどで表示されないし、ページの移動もされず、見た目的にもかなりGOODですよ。

サンプルとして、左のイメージ(わたしの相方)をクリックしてみてください。

Lightbox.jsは、MovableType(ムーバブルタイプ)以外でも使用できます。

今回参考にしたサイトは、magnet:.. 様と、Lightbox JS本家です。

▼Lightbox.js v2.0の入手はこちらから▼
http://www.huddletogether.com/projects/lightbox2/

カスタマイズ方法

  1. まず、Lightbox.jsをダウンロードします。
    上記URLから圧縮ファイルをダウンロードします。 そして、適当なフォルダに展開してください。

  2. 次にjs/lightbox.jsを修正します。
    js/lightbox.jsの修正内容は以下の通りです。

    1. 62行目
    2.  
    3. 修正前
    4. var fileLoadingImage = "images/loading.gif";
    5. var fileBottomNavCloseImage = "images/closelabel.gif";
    6.  
    7. 修正後
    8. var fileLoadingImage = "http://●●●.com/lightbox/images/loading.gif";
    9. var fileBottomNavCloseImage = "http://●●●.com/lightbox/images/closelabel.gif";

    各自の環境に合わせて青い字の部分を修正します。

  3. 修正したらサーバーにアップロードします。
    アップロード先はどこでも構いませんが、ここでは上記例の場所にアップロードするものとして説明します。

    まず、index.htmlと同じ場所にlightboxディレクトリを新規作成してください。
    そして、そのディレクトリの中にcss、images、jsフォルダをそのままアップロードします。

    これでLightboxの設置は完了です。

  4. 次にスタイルシートの修正を行います。
    わたしは、既存のスタイルシートstyles-site.cssの中にcss/lightbox.cssをインポートするよう、以下のように追加しました。

    1. @import url(<$MTBlogURL$>lightbox/css/lightbox.css) screen;

    各テンプレート内に個別に追加する場合は、以下の1行を<head>～</head>の間に追加します。

    1. <link rel="stylesheet" href="<$MTBlogURL$>lightbox/css/lightbox.css" type="text/css" media="screen" />

  5. 最後にテンプレートを修正します。
    修正するテンプレートは、メイン・インデックス、個別アーカイブなど、エントリが表示されるテンプレートが対象となります。
    <head>～</head>の間に以下のコードを追加します。

    1. <script type="text/javascript" src="<$MTBlogURL$>lightbox/js/prototype.js"></script>
    2. <script type="text/javascript" src="<$MTBlogURL$>lightbox/js/scriptaculous.js?load=effects"></script>
    3. <script type="text/javascript" src="<$MTBlogURL$>lightbox/js/lightbox.js"></script>

    追加したら保存して再構築します。

以上で一通りLightbox JSの準備ができました。
Lightbox JSでサムネイル画像を表示させるには、以下のようにします。

  1. <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をテキストエディタで開いてください。 そして、以下のように修正します。

  1. 3604行目
  2. 修正前
  3. <a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
  4.  
  5. 修正後
  6. <a href="$url" rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
  7.  
  8.  
  9. 3608行目
  10. 修正前
  11. <a href="$url" ><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
  12.  
  13. 修正後
  14. <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(4)

from TRANS

というのを実装してみた。サンプルは自分のサイトに設置しているが、まだコンテンツが不十分で、ネットで公開できないレベルなので、コードだけ説明しておく。ちな...

Tracked on August 27, 2006
from MovableType備忘録

こんにちわアル～(●´∀｀●)♪ わたしのトップページのサイドバーに左図のようなメニューを設置してみましたの。 カッコ良くない (＞∀＜　)!? Lig...

Tracked on September 29, 2007
from My Web Diary

    ...

Tracked on November 7, 2007
from Aioside

最近ちょくちょく閲覧させてもらってるK's Labo 3Gさんで 画像をクリック...

Tracked on December 4, 2008

 Comments(24)

#1: Posted by magnet @ May 5, 2006 [REPLY]
user-pic

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

 
#2: Posted by bzbell @ May 5, 2006 [REPLY]
user-pic

>>1 magnet さん

こんにちわ^^

> RSSの登録もさせて頂きました。
ありがとうございます。

> 今後ともいろいろ情報交換できたら良いですね＾＾
はい♪かなり嬉しいです。
ちょくちょく寄らせていただきます。

> ヨロシクお願いします！
こちらこそよろしくです。

 
#3: Posted by yutaka @ May 31, 2008 [REPLY]
user-pic

先日は大変お世話になりました
Lightboxをやってみたくて何度もこのエントリーを読み返しています。
3)について
>まず、index.htmlと同じ場所にlightboxディレクトリを新規作成してください。
このindex.htmlと同じ場所というのはMTをインストールするとサト名で作成されるディレクトリーのことですか？
4)について
>次にスタイルシートの修正を行います
このスタイルシートとはどこにあるcssファイルのことでしょう？
>各テンプレート内に個別に追加する場合は、以下の1行を～の間に追加します。
この該当ファイルはどのファイルでしょう？
5)最後にテンプレートを修正します。
これはどこにあるファイルのことでしょうか？

MTを使い始めた初心者にとって一番難解なのはこういったカスタマイズの説明を読んでいても、どのファイルを触ったらいいのかが、ファイルが沢山ありすぎてわからないのです。
mt/lib/MT/App/CMS.pmをテキストエディタで開いてのようにこういうファイルはすぐに探し出せるのですがテンプレート関係はどのファイルなのかが非常に分かりにくく苦戦します
どうぞよろしくお願いします。

 
#4: Posted by Author Profile Page bzbell @ May 31, 2008 [REPLY]
user-pic

>>3 yutaka さん

こんにちわ^^

yutaka さんは最初っからカスタマイズされたテンプレートを使ってしまってるので、デフォルトのテンプレートのことはまったく理解されてないんですねあせあせ

> このスタイルシートとはどこにあるcssファイルのことでしょう？

yutaka さんの場合には「スタイルシート(メイン)」に追加すればいいと思います。

> この該当ファイルはどのファイルでしょう？

記事内でも説明してますよに、特定のテンプレートのみ lightbox を使用したい場合の説明になります。
ですので、必須ではありません。
スタイルシート(メイン)内に追加すれば不要です。

> これはどこにあるファイルのことでしょうか？

ファイルではありません。テンプレートを修正します。
yutaka さんの場合でしたら、「ヘッダー」テンプレートモジュール内に追加したらいいと思います。

> MTを使い始めた初心者にとって一番難解なのはこういったカスタマイズの説明を読んでいても、どのファイルを触ったらいいのかが、ファイルが沢山ありすぎてわからないのです。

ほとんどのサイトさんではデフォルトのテンプレートを元に説明されてると思います。記事内容と自分の環境を照らし合わせて、理解してカスタマイズする必要がありますので、yutaka さんのように最初っからカスタマイズされたテンプレートを使ってしまうと何が何だか分からなくなってしまうと思いますあせあせ

また、カスタマイズ記事によっては既に古い内容のものもあります。
そこら辺もちゃんと見極める必要がありますのでご注意ください。
ちなみにこの記事は MT3.2 の頃のものです。

 
#5: Posted by yutaka @ June 1, 2008 [REPLY]
user-pic

>yutaka さんのように最初っからカスタマイズされたテンプレートを使ってしまうと何が何だか分からなくなってしまうと思います。

なるほど、デフォルトテンプレートを理解していないのが問題なわけですね、たしかに。だからカスタマイズのエントリーを読んでいても理解できない部分が出てくるんですね。よく分かりました。そのテンプレートの仕組みを理解しないといけないんですね、ラジャ〜あせあせ

 
#6: Posted by Author Profile Page bzbell @ June 1, 2008 [REPLY]
user-pic

>>5 yutaka さん

分からないことは聞いていただけれお答えしますので、がんばってくだくさいうぅ～ん

 
#7: Posted by yutaka @ June 2, 2008 [REPLY]
user-pic

http://bizcaz.com/archives/2006/05/04-024443.php
http://bizcaz.com/archives/2007/09/24-152606.php
上記サイトを参考に設置しました。
１）ダウンロードしたLightboxは解凍後MTのインストールディレクトリー
mt.cgiがある所にアップしました

２）js/lightbox.jsを修正しました

３）スタイルシートにコードを追加しました

４）ヘッダーにコードを追加しました

５）>次に mt/lib/MT/Asset/Image.pm を編集します。
具体的には以下の 2 箇所をカスタマイズします。
の一カ所目は修正完了です。しかし二カ所目の説明されている部分が無いのですが
とりあえず一カ所だけ修正してアップしました

６）エントリー作成で画像をアップした後にコードを見ると
rel="lightbox"は追加されていますが、効果は適用されません。
以上、どこが間違っているのか、教えてもらえないでしょうか？

 
#8: Posted by Author Profile Page bzbell @ June 2, 2008 [REPLY]
user-pic

>>7 yutaka さん

記事を投稿した頃は MT4.0 だったので、MT4.1 になったことで変更されてるようですね。

  1. まず、lightbox を mt.cgi と同じ場所に置かないほうがいいと思います。 理由は MT のアップグレードの度に lightbox を移動する羽目になるからです。 MT とは関係のない場所に置くほうがよいですよ (￣∇￣)b
  2. mt/lib/MT/Asset/Image.pm の修正箇所に問題があるんだと思います。
    今はお仕事中なので MT のコードを見ることができないので、帰宅したら確認してみます。

サンプルが添付されてると思いますので、そちらの表示を確認してみてください。
基本的にはそのサンプルと同じことすれば表示されるはずですパチパチ

 
#9: Posted by yutaka @ June 2, 2008 [REPLY]
user-pic

>まず、lightbox を mt.cgi と同じ場所に置かないほうがいいと思います。理由は MT のアップグレードの度に lightbox を移動する羽目になるからです

なるほどそうですね、
http://fish1091.com/binsans_cafe_mt/lightboxに移動しました
で、lightbox.jsのイメージファイルの位置も修正。どちらのファイルもURLをブラウザで開くと正常にファイルが見えるのでOKだと思います

>mt/lib/MT/Asset/Image.pm の修正箇所に問題があるんだと思います

何度も確認してみたのですが、間違いないと思うんですが？？
全く急いでおりませんのでお暇なときにでも又、教えてください

 
#10: Posted by Author Profile Page bzbell @ June 2, 2008 [REPLY]
user-pic

>>9 yutaka さん

一応、わたしがカスタマイズした Image.pm を以下のページで公開してますので参考にしてください。
http://bizcaz.com/archives/2007/09/24-152606.php

- 追記 -
lightbox.js を HTML ヘッダ内に追加してください。
そうしないと lightbox によるエフェクトがされません (;￣∇￣A

 
#11: Posted by yutaka @ June 2, 2008 [REPLY]
user-pic

こんばんわ
>一応、わたしがカスタマイズした Image.pm を以下のページで公開してますので参考にしてください。

これって、お昼に何度も見ていたのですが、どこが変更になっていますか？

>lightbox.js を HTML ヘッダ内に追加してください。
上記解説4番の二つ目のタグのことですね？これはテンプレート〜ヘッダーに書いておりますが。

 
#12: Posted by Author Profile Page bzbell @ June 2, 2008 [REPLY]
user-pic

>>11 yutaka さん

> これって、お昼に何度も見ていたのですが、どこが変更になっていますか？

246、263 ～ 265 行目です。

> 上記解説4番の二つ目のタグのことですね？これはテンプレート〜ヘッダーに書いておりますが。

いえ、4 番目はスタイルシートでして、わたしが言ってるのは 5 番目のlightbox.js のことですあせあせ
yutaka さんのテンプレートでは prototype.js と scriptaculous.js は既にロード済みですので、lightbox.js だけを HTML ヘッダ内に追加してください。

 
#13: Posted by yutaka @ June 2, 2008 [REPLY]
user-pic

http://fish1091.com/binsans_cafe_mt/
なんだか、動きたいようなふりをしているんだが....キャハハ

 
#14: Posted by Author Profile Page bzbell @ June 3, 2008 [REPLY]
user-pic

>>13 yutaka さん

先ほど yutaka さん宅に、わたしが追加した「ヘッダー」テンプレートモジュールのファイルを添付してメルしました。
参考にしてくださいぺこり

 
#15: Posted by yutaka @ June 3, 2008 [REPLY]
user-pic

添付ファイルありがとうございました。やっと、やっと出来上がりました。ヘッダーファイルの内容を比べてみましたが、相当違いがありました。ショックを受けました(笑)
なんども、なんども、本当にありがとうございましたもじもじ

 
#16: Posted by junpapa @ January 23, 2009 [REPLY]
user-pic

初めまして。
何度も読み直し、準備完了と思うのですが、まったく表示されません。

> 以上で一通り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>

これはどこに書き込めば良いのでしょうか？

> CMS.pmを編集します。
> mt/lib/MT/App/CMS.pmをテキストエディタで開いてください。 そして、以下のように修正します。

CMS pm を開いて見ましたが、該当行がありません。
Asset / Image.pm は書き換えました。

なぜ lightbox で表示されないのか分かりません。宜しくお願い致します。

 
#17: Posted by Author Profile Page bzbellからjunpapaへの返信 @ January 23, 2009 [REPLY]
user-pic

>>16 junpapa さん

こんばんわ^^

junpapa さんが使われてる MT のバージョンは何ですか!?
この記事は当時の MT のバージョン( MT 3.3 辺りかなぁ )の CMS.pm なので、現行の MT とは異なります。

MT4.23 の場合には、mt/lib/MT/Asset/Image.pm の 325 行目を以下のように修正します。 

'<a href="%s" rel="lightbox"><img alt="%s" src="%s" %s %s /></a>',
上記は画像挿入時にサムネイルを選択した場合のみ Lightbox が使用可能になります。

ご確認くださいぺこり

 
#18: Posted by junpapa @ January 24, 2009 [REPLY]
user-pic

おはようございます。

MT 4.23 でした。
Image.pm の 325 行目は修正していました。
335 行目〜にも追加を入れています。
これで万全だと思って投稿テストを行ったのですが、サムネイル画像をクリックしても以前と同じ表示でした。キャハハ

 
#19: Posted by junpapa @ January 24, 2009 [REPLY]
user-pic

お世話になります。

IE 7 でエラー表示が出ました。

ライン：133
文字：3
エラー：'Biilder' は宣言されていません。
コード：0
URL：http://www.junpapa.com/weblog/

と表示されました。
これのせいで lightbox での表示が出来ないのでしょうかねぇ？

このエラーはどうやれば直るのでしょうか？キャハハ

 
#20: Posted by Author Profile Page bzbellからjunpapaへの返信 @ January 24, 2009 [REPLY]
user-pic

>>19 junpapa さん

こんにちわ^^

まず確認したいのですが、Imge.pm を修正したことで「画像の挿入」で記事中には修正したコードが追加されてたということで良いですね!?

junpapa さんのサイトのソースを確認させてもらいました。

  1. HTML ヘッダ中の lightbox/js/effect じゃなくって、effect.js に変更してください。
  2. >>17 で記した修正箇所とは別のところも修正されてますよね!?
    それだとポップアップを使ったサムネイル表示と Lightbox がブッキングしませんか!?
    junpapa さんが知っててやってるのでしたら問題ないんですけどあせあせ

以上です。

 
#21: Posted by junpapa @ January 24, 2009 [REPLY]
user-pic

スミマセン。
喜び過ぎて、#20 のコメントを読む前に投稿してしまいました。
1.effect.js に変更しました。
2.＃17での箇所と別のところは元に戻しました。

とりあえず表示出来るようになったのですが、画像周辺の白い部分が大きいのですが、
これは修正可能でしょうか？

 
#22: Posted by Author Profile Page bzbellからjunpapaへの返信 @ January 24, 2009 [REPLY]
user-pic

>>21 junpapa さん

それは CSS に依存してますね。
junpapa さんとこの CSS と Lightbox.css の見直すことで改善できると思いますワクワク

 
#23: Posted by Author Profile Page bzbellからjunpapaへの返信 @ January 24, 2009 [REPLY]
user-pic

>>21 junpapa さん

junpapa さんとこの CSS 覗かせてもらいました。
たぶん、screen.css 内の 449 行目以降が不要なんだと思いますブイブイ

 
#24: Posted by junpapa @ January 24, 2009 [REPLY]
user-pic

ありがとうございました。
今晩から安心して眠れます。

お世話になりました。やあ！

 

 Post a Comment

 

コメント用フィード