Lightbox JS で画像を表示する
Category：[Lightbox JS]
Tag：[Customize, FC2, JavaScript, MovableType, sb, SereneBach]
Permalink
 サムネールをクリックすると同一ウィンドウ上に画像を表示するという 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 追記
７項を追加しました。また記述の一部を修正しました。
