Lightbox JS の Movable Type での不具合を修正する
昨日エントリーしたLightbox JS で画像を表示するですが、Movable Type のアーカイブページ（カテゴリー・アーカイブ／月別アーカイブ／エントリー・アーカイブ）で正常に動作しないようでした。すいません。
下記に対処方法を記しておきます。
１．lightbox.css / lightbox.js の修正
カテゴリー・アーカイブ／月別アーカイブ（日別・週別も同じ）／エントリー・アーカイブの各ページのパスが loading.gif のパスと異なるため、lightbox.js の193行目で下記の JavaScript エラーが発生し、正常に読み込めないようです。
objLoadingImage has no propertiesとりあえず loading.gif のパスにドメインを追加することでOKになりました。具体的には、当サイトの場合であれば、lightbox.js の36行目辺り
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';を
var loadingImage = 'http://www.koikikukan.com/loading.gif';
var closeButton = 'http://www.koikikukan.com/close.gif';に変更します。なお試験サイトではドキュメントルートからのパス設定でも大丈夫でした。
またIEでは overlay.png のパスもきちんと設定しないと正常に読み込めないため、lightbox.css の14行目と20行目にある overlay.png にドメインを追加します。当サイトの例は下記の通りです。
#overlay{ background-image: url(http://www.koikikukan.com/overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.koikikukan.com/overlay.png", sizingMethod="scale");
}lightbox.css の内容を styles-site.css に転記している場合（かつ普通に再構築対象にしている場合）や、ligjtbox.css をインデックステンプレートとして登録している場合は、<$MTBlogURL$>overlay.png とすればOKです。こちらも試験サイトではドキュメントルートからの設定で正常に読み込めました。
２．エントリー・アーカイブの修正
エントリー・アーカイブは１項の他に、onloadイベントハンドラとの競合で正常に動作しないという報告を下記のサイトで頂いています。ありがとうございました。
対処は、安直ですがエントリーアーカイブの onload イベントハンドラ（赤色部分）
<body class="…" onload="individualArchivesOnLoad(commenter_name);>を一旦削除して、
<body class="…">とし、エントリー・アーカイブの一番最後に
<script type="text/javascript">
<!--
individualArchivesOnLoad(commenter_name);
//-->
</script>を追加しています。この individualArchivesOnLoad は、サイン・イン中であれば名前とメール欄を非表示にし、各フォームにCookie情報を埋め込む動作を行っているだけですので、この対処で問題ない筈です。
ちなみに onload イベントハンドラに2行書いたりしてみましたがNGでした。
３．ローディング画像・背景画像が表示されない場合
１項で修正した loading.gif のURL、および overlay.png のURLをブラウザのアドレス欄に直接入力してください。画像が表示されない場合、設定したURLが誤っていますので、１項で設定したURLを修正してください。
2006.03.21 追記
１項の close.gif の設定、および３項を追記しました。
Lightbox JS で画像を表示する
 サムネールをクリックすると同一ウィンドウ上に画像を表示するという Lightbox JS です。ご質問を頂いて知ったのですが結構広まっているようです。ということでこのエントリーにてご紹介したいと思います。 |
2006.10.10 追記：機能改善された Litebox 1.0 の記事「Litebox 1.0 をブログに適用する」を公開しています。
０．動作
公式サイトでも確認できますが、とりあえず上のサムネイルをクリックしてください。ローディング画像が表示された後、元画像が表示されるという、お洒落なスクリプトです。
表示された画像をクリックすると元の画面に戻ります。一度表示された画像を再度クリックするとローディング画像は表示されません。
以下、このスクリプトの設定方法です。
１．ファイルのダウンロード
動作に必要なファイル（スクリプト・スタイルシート・画像）をダウンロードします。
まず下記のサイトへ進んでください。
表示されたページ一番下にある「DOWNLOAD」より下記のファイルをダウンロードできるようになってますので、それぞれのリンクをクリックしてください（IEであれば右クリックして「対象をファイルに保存」を選択）。
- lightbox.js - JavaScriptファイル
- lightbox.css - スタイルシート
- overlay.png - オーバーレイ表示するための背景画像
- loading.gif - ローディング中に表示する画像
- close.gif - 閉じるマーク画像
２．ファイルのアップロード
ダウンロードした全てのファイル・画像を index.html と同じディレクトリにアップロードします。
Movable Type に適用させる場合の修正
Lightbox JS の Movable Type での不具合を修正するを参照ください。
FC2ブログに適用させる場合の修正
FC2ブログではファイルのアップロード先が決まっているため、lightbox.js の36行目辺りにある記述に青色部分を追加します。
var loadingImage = 'file/loading.gif';また、lightbox.css についても、下記のように最後から2行目の部分に青色部分を追加します。
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="file/overlay.png", sizingMethod="scale");３．テンプレートの修正
lightbox.js を有効にするため、テンプレートの <head>～</head> の間に下記を追加します。
Movable Type の場合
<script type="text/javascript" src="<$MTBlogURL$>lightbox.js"></script>Serene Bach / sb の場合
<script type="text/javascript" src="{site_top}lightbox.js"></script>FC2ブログの場合
<script type="text/javascript" src="<%url>file/lightbox.js"></script>またスタイルシートを読み込ませるために、light.css の中身を現在利用中のスタイルシートにコピー＆ペーストするか、下記のタグを <head>～</head> 追加します。挿入位置は現在のスタイルシートを読み込んでいる link 要素のすぐ下が良いでしょう。
Movable Type の場合
<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" />Serene Bach / sb の場合
<link rel="stylesheet" href="{site_top}lightbox.css" type="text/css" />FC2ブログの場合
<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" />４．リンクの設定
Lightbox JS を利用したい画像リンクやテキストリンクに、青色で示すように rel 属性を与えます。またオーバレイ表示させる元の画像も用意しておいてください。
<a href="hogehoge.jpg" rel="lightbox"><img src="thumbnail.jpg" alt="…" ></a>これでリンクをクリックすればサンプルと同じ動作を行えるようになります。
５．不具合について
注：本項の内容は解消されているようです。
IEでは半透明の背景がページ全体をうまく覆うことができない場合があるようです。下記のサイトで修正方法が紹介されていますが、いくつかの試験サイトで設定したところ、IEでも正常に表示される時もありました（原因不明）。
またOpera8では iframe 部分等に半透明の背景が適用されませんでした。Firefoxは正常に表示されるようです。
６．ツールチップの文字を修正する
元画像が表示されると「Click to close」というツールチップが表示されますが、この言葉を変更したい場合は、lightbox.js の309行目辺りにある
objLink.setAttribute('title','Click to close');を
objLink.setAttribute('title','画像をクリックすると元の画面に戻ります');という具合に変更します。日本語を設定する場合は、lightbox.js をブログと同じ文字コードで保存するか、
<script type="text/javascript" src="<$MTBlogURL$>lightbox.js" charset="Shift_JIS"></script>と、スクリプトの文字コードを設定します。
７．Flash ムービーが背景画像に隠れない問題について
プログペット等の Flash は拡大画像を表示した際、背景となる PNG 画像の上に表示されるという問題があります。この問題を解消するには Lightbox JS でブログパーツ等の Flash を隠すカスタマイズを参照ください（動作を保証する内容ではありません）。
以上です。
２項のCSS修正についてはSmallStyle：Lightbox JS での 背景画像 (overlay.png) の配置場所を参考にさせて頂きました。またサンプル画像はEyesPicより頂きました。ありがとうございました。
2006.03.17 追記
７項を追加しました。また記述の一部を修正しました。
