Litebox 1.0 の rel 属性を自動付与する
以前、クールに画像を表示するツール Litebox 1.0 をご紹介しました。この Litebox を起動するためには、a 要素の rel 属性に "lightbox" を付与しなければならないという条件があり、これを手動で付与するのは結構面倒です。
ということで「自動付与できないでしょうか」というご質問を頂きました。大変遅くなりましたが、rel 属性を自動付与する方法を本エントリーにてご紹介致します。
rel 属性を自動付与するには、Litebox 1.0 のパッケージ内にある、js/litebox-1.0.js を任意のエディタで開き、130 行目辺り（リスト 1）に青色のコードを追加します。
： // loop through all anchor tags for (var i=0; i<anchors.length; i++){ var anchor = anchors[i]; if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/) && !anchor.getAttribute('rel')) { anchor.setAttribute('rel', 'lightbox'); } var relAttribute = String(anchor.getAttribute('rel')); // use the string.match() method to catch 'lightbox' references in the rel attribute if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){ anchor.onclick = function () {myLightbox.start(this); return false;} } } ：- リスト1 litebox-10.js 変更箇所
この変更は、ページ内にある a 属性に rel="lightbox" を付与します。ただし、rel 属性が予め設定されている場合は処理を行ないません。したがって画像をグループ表示する場合は手動で rel 属性を付与すれば、お互いの処理が干渉しません。
ただしページ全体の a 要素をチェックするため、サイドバー等の予期しない箇所に Litebox が設定される可能性があります。記事本文内だけにとどめたい場合は、122行目辺りの処理（リスト2）
： initialize: function() { if (!document.getElementsByTagName){ return; } var anchors = document.getElementsByTagName('a'); ：- リスト2 litebox-10.js 変更箇所2（変更前）
を、リスト3のように青色部分を追加すると良いでしょう。
： initialize: function() { if (!document.getElementsByTagName){ return; } var anchors = document.getElementById('content').getElementsByTagName('a'); ：- リスト3 litebox-10.js 変更箇所2（変更後）
赤色の content は、記事部分全体を括っている div 要素の id 属性を設定しています。
また、前バージョンの Lightbox JS でも「Lightbox JS の rel 属性を自動付与する」という記事を挙げてますので、参考になれば幸いです。
2007.03.01 追記
スクリプトでエラーチェックができていなかったので修正しました。
Litebox 1.0 をブログに適用する
Lightbox JS v2.0 の後継版、Litebox が出ていました。ということで v2.0 はエントリーし損ないましたが、今回は Litebox をブログに適用するカスタマイズを紹介します。
Lightbox の時代からそうなのですが、このツールは画像を表示するページのパスが変化した場合のケースまで考慮されていません。つまりブログではインデックスページや各アーカイブページのパスがそれぞれ異なることため、提供されているファイルに対し、各ページから同様の振る舞いをさせるための修正が必要になります。
下記に修正を施したサンプルを作りました。トップページと、そこからリンクされている記事ページでも動作するようになっています。
サンプルでは Movable Type を利用していますが、他のブログでもカスタマイズのタグ部分を適宜読み替えて頂ければ適用可能と思われます。また Movable Type についてはテンプレート機能を利用した方法も併せて紹介しています。
注：ページ内に U2B Player を設定していると litebox は動作しませんのでご注意ください。 → 不具合解消されています（参考：U2B Playerに新機能「Link2B」追加）。
画像表示方法
カスタマイズの前に、記事に画像を設定する方法を説明しておきます。
すでにご存知と思われますが、Lightbox 同様、a 属性に青色 *1 で示す rel="lightbox" を設定します。
<a href="http://domain/path/to/images/hogehoge.jpg" rel="lightbox"><img src="http://domainpath/to/images/hogehoge_thumb.jpg" /></a>グループ化する場合は rel 属性値に "[]" を付与します。
<a href="http://domain/path/to/images/hogehoge1.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge1_thumb.jpg" /></a>
<a href="http://domain/path/to/images/hogehoge2.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge2_thumb.jpg" /></a>
<a href="http://domain/path/to/images/hogehoge3.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge3_thumb.jpg" /></a>"[]" 内の文字列が同じものについては画像に前後リンクが付与されて連続で開くことができます。
また、rel 属性を自動付与するカスタマイズも色々出回っているようですので、適用できるかもしれません。
１．アーカイブのダウンロード
Litebox のサイト後方にある Download の litebox-1.0.zip のリンクをクリックしてダウンロードします。
ダウンロードアーカイブを解凍して、その中から下記のファイルを利用します。
- litebox-1.0/css/lightbox.css
- litebox-1.0/images/blank.gif
- litebox-1.0/images/closelabel.gif
- litebox-1.0/images/loading.gif
- litebox-1.0/images/nextlabel.gif
- litebox-1.0/images/prevlabel.gif
- litebox-1.0/js/litebox-1.0.js
- litebox-1.0/js/moo.fx.js
- litebox-1.0/js/prototype.lite.js
その他のファイルや画像はサンプル用ですので不要です。
以下、Movable Type のテンプレート機能を利用する方法と、利用しない方法に分けて説明します。Movable Type 以外のブログの場合はテンプレート機能を利用しない方を参考にしてください。
２．ファイルの修正
２．１ テンプレート機能を利用しない場合
SereneBach や FC2ブログ等はこちらの解説を参考にしてください。
２．１．１ lightbox.css の修正
lightbox.css にある下記の赤色部分（3ヶ所）
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }を
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://domain/path/to/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://domain/path/to/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://domain/path/to/images/nextlabel.gif) right 15% no-repeat; }と、ご自身のブログのURLに修正します。
２．１．２ litebox-1.0.js の修正
litebox-1.0.js の下記の部分に、青色で示した「ドキュメントルートからのパス」を設定します。
//
// Configuration
//
var fileLoadingImage = "/path/to/images/loading.gif";
var fileBottomNavCloseImage = "/path/to/images/closelabel.gif";２．２ テンプレート機能を利用する場合
ファイルを修正する際にMTタグを利用し、そのファイルをテンプレートとして登録することで修正箇所を自動変換します。テンプレートに登録するのは修正する2ファイルのみです。
２．２．１ lightbox.css の修正
lightbox.css にある下記の赤色部分
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }を
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(<$MTBlogURL$>images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(<$MTBlogURL$>images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(<$MTBlogURL$>images/nextlabel.gif) right 15% no-repeat; }に修正します。
そしてこのファイルをインデックステンプレートとして登録します。
方法は管理メニューの「テンプレート」→右上「テンプレートを新規作成」をクリックして、次のページで下記のように設定してください。
- テンプレート名：lightbox用CSS（何でもいいです）
- 出力ファイル名：lightbox.css
- このテンプレートにリンクするファイル：（設定不要）
- 再構築オプション：チェックを外す
- テンプレートの内容：lightbox.css の中身を丸ごとコピー
設定が完了したら保存・再構築してください。
２．２．２ lightbox-1.0.js の修正
lightbox.css の下記の部分に、青色で示したMTタグを設定します。
//
// Configuration
//
var fileLoadingImage = "<$MTBlogRelativeURL$>images/loading.gif";
var fileBottomNavCloseImage = "<$MTBlogRelativeURL$>images/closelabel.gif";そしてこのファイルもインデックステンプレートとして登録します。
方法は管理メニューの「テンプレート」→右上「テンプレートを新規作成」をクリックして、次のページで下記のように設定してください。
- テンプレート名：lightbox用JS（何でもいいです）
- 出力ファイル名：litebox-1.0.js
- このテンプレートにリンクするファイル：（設定不要）
- 再構築オプション：チェックを外す
- テンプレートの内容：litebox-1.0.js の中身を丸ごとコピー
設定が完了したら保存・再構築してください。
３．ファイルのアップロード
index.html があるディレクトリに
- css/lightbox.css
- images/blank.gif
- images/closelabel.gif
- images/loading.gif
- images/nextlabel.gif
- images/prevlabel.gif
- js/litebox-1.0.js
- js/moo.fx.js
- js/prototype.lite.js
という構成になるようにアップロードします。２．２項のテンプレート機能を利用する場合は、lightbox.css と litebox-1.0.js のアップロードは行わないでください。
またブログサービスの制約等で、この構成でアップロードできない場合、ファイルを同じディレクトリにアップロードして、４項の src 属性を適宜修正してください。
４．テンプレートの修正（head 部分）
メインページ／カテゴリー・アーカイブ／日付アーカイブ／エントリー・アーカイブの <head>～</head> の間の任意の行に下記を追加します。
Movable Type でテンプレート機能を利用しない場合
<link rel="stylesheet" href="<$MTBlogURL$>css/lightbox.css" type="text/css" media="screen" />
：
（略）
：
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/litebox-1.0.js"></script>Movable Type でテンプレート機能を利用する場合
<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" media="screen" />
：
（略）
：
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>litebox-1.0.js"></script>その他のテンプレートで利用する場合
<link rel="stylesheet" href="http://domain/path/to/css/lightbox.css" type="text/css" media="screen" />
：
（略）
：
<script type="text/javascript" src="http://domain/path/to/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://domain/path/to/js/moo.fx.js"></script>
<script type="text/javascript" src="http://domain/path/to/litebox-1.0.js"></script>５．テンプレートの修正（スクリプト起動の追加）
５．１ メインページ／カテゴリー・アーカイブ／日付アーカイブ／その他のブログ
body 要素に青色の onload 属性を追加します。
<body class="layout-two-column-right main-index" onload="initLightbox()">５．２ エントリー・アーカイブ（Movable Type のみ）
body 要素に、すでに onload 属性が存在する場合の記述方法です。ここでは2通りの方法を紹介します。
ひとつめは、body 要素の onload 属性に追加する方法です。
<body class="layout-two-column-right individual-entry-archive" onload="individualArchivesOnLoad(commenter_name);initLightbox();">もうひとつは </body> の直前に追加する方法です。
<script type="text/javascript">
<!--
initLightbox();
//-->
</script>
</body>2006.07.11 追記
２．１．２項の記述が誤っていたため修正しました。
2006.10.12 追記
４項の記述を修正しました。
2006.10.25 追記
U2B Player について追記しました。
2007.04.15 追記
U2B Player の不具合解消について追記しました。
*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
Lightbox JS の rel 属性を自動付与する
Lightbox JS を起動するには a 要素の rel 属性に "lightbox" を付与しなければならないという条件がありますが、手動で付与するのは結構面倒です。
ということでご質問を頂きましたので、rel 属性を自動付与する（あるいは rel 属性を付与せずに Lightbox を起動する）方法をいくつかご紹介します。
- rel 属性なしで Lightbox JS を起動する
- Movable Type のアンカータグ挿入ボタンに rel 属性を自動付与する
- Movable Type のアップロード画面からのサムネール画像リンクに rel 属性を自動付与する
- Serene Bach の画像リンクに rel 属性を自動付与するプラグイン
１．rel 属性なしで Lightbox JS を起動する
ページ内にある全ての画像リンクに対し、Lightbox JS を起動する方法です。a 要素の href 属性の末尾が jpg/gif/png の場合、Lightbox JS を起動するようにしています。
変更方法は、lightbox.js の293行目辺りにある下記の赤色部分、
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
anchor.onclick = function () {showLightbox(this); return false;}
}
}を青色に修正します。
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("href").match(/jpg$|gif$|png$/)){
anchor.onclick = function () {showLightbox(this); return false;}
}
}パッチを使える方は以下のパッチをご利用ください。
--- lightbox.js.bak Thu Mar 23 11:44:29 2006
+++ lightbox.js Thu Mar 23 12:52:09 2006
@@ -289,7 +289,7 @@
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
- if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
+ if (anchor.getAttribute("href") && anchor.getAttribute("href").match(/jpg$|gif$|png$/)){
anchor.onclick = function () {showLightbox(this); return false;}
}
}この修正は、rel 属性を付与せずに Lightbox PLUS を起動できる下記の hack を参考にさせて頂きました。ありがとうございました。
drk7.jp：Lightbox Plus で画像を同一画面にオーバーレイして表示
２．Movable Type のアンカータグ挿入ボタンに rel 属性を自動付与する
Movable Type のエントリー編集画面のアンカータグ挿入ボタン（a href="?"）利用時に rel 属性を自動的に付与します。このボタンは画像リンク以外のリンクでも使用することがあるので、href 属性の内容の末尾が jpg/gif/png の場合のみ rel 属性を付与するようにしてします。
変更方法は、mt-static/mt_ja.js（3.17xの場合はローカル・サイト・パス配下の mt.js） を任意のエディタで開いて、赤色部分のコード
：
var my_link = prompt(isMail ? 'Enter email address:' : 'Enter URL:', link);
if (my_link != null) {
if (str == '') str = my_link;
if (isMail) my_link = 'mailto:' + my_link;
setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
}
return false;
：を青色のコードに変更してください。
：
var my_link = prompt(isMail ? 'Enter email address:' : 'Enter URL:', link);
if (my_link != null) {
if (str == '') str = my_link;
if (isMail) my_link = 'mailto:' + my_link;
my_link.match(/jpg$|gif$|png$/) ? setSelection(e, '<a href="' + my_link + '" rel="lightbox">' + str + '</a>') :
setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
}
return false;
：パッチを使える方は以下のパッチをご利用ください。
--- mt_ja.js.bak Wed Oct 12 13:34:52 2005
+++ mt_ja.js Thu Mar 23 11:09:26 2006
@@ -279,7 +279,8 @@
if (my_link != null) {
if (str == '') str = my_link;
if (isMail) my_link = 'mailto:' + my_link;
- setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
+ my_link.match(/jpg$|gif$|png$/) ? setSelection(e, '<a href="' + my_link + '" rel="lightbox">' + str + '</a>') :
+ setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
}
return false;
}３．Movable Type のアップロード画面からのサムネール画像リンクに rel 属性を自動付与する
Movable Type のアップロード画面からサムネール画像リンクを生成した場合に rel 属性を自動付与する方法です。このカスタマイズについては下記を参照ください。
なおサムネール画像作成には ImageMagic または NetPBM がインストールされていることが必要です。
４．Serene Bach の画像リンクに rel 属性を自動付与するプラグイン
Serene Bach の場合、下記のサイトで配布されているプラグインが便利です。
Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す
Flash は門外漢なのですが、テンプレートご利用サイトの Atelier Shuhei Weblog さんより解消するための情報（下記リンク参照）を頂きました。ありがとうございました。 |
サムネール画像から拡大画像をポップアップさせずにスマートに表示する １．サンプル
とりあえず作ってみました。
それぞれの右サイドバーにこうさぎとメロメロパークの Flash を置いています。エントリーにあるサムネール画像をクリックして拡大画像が表示された時に Flash がどのように表示されるかをご覧ください。今のところ Windows 2000/XP IE6/Firefox1.5/Opera8 で正常に隠れることを確認しています。
このサンプル用に初めてブログペットを登録しました（笑）。
２．修正方法
object 要素がHTML上にある場合と、そうでない場合の修正方法について記します。
２．１ object 要素がHTML上にある場合
下記の param 要素を object 要素内に追加します。
<param name="wmode" value="transparent">それから embed 要素に wmode 属性を追加します。
wmode="transparent"wmode 要素の value 属性に "transparent" を設定することで Flash ムービーの背景を透明に設定することができるようです。
おおざっぱに書いた Flash 用HTML コードへの挿入イメージは下記（青色部分）のようになります。
<object>
<param name="…" value="…" />
<param name="…" value="…" />
<param name="wmode" value="transparent">
<embed src="…" wmode="transparent" />
</object>それぞれの挿入位置は任意です。なお embed 要素の一番最後に wmode 属性を追加する際は、タグを閉じるマーク（"/"）の前に半角空白を挿入してください。挿入しないと XHTML valid なページになりません。
２．２ object 要素がHTML上にない場合
ペット系のブログパーツは JavaScript で読み込む形式になっているものがあります。そのような場合は script 要素の src 属性に記述された URL をブラウザに入力して、表示（またはダウンロード画面）された内容をコピーして、それをページに貼り付けます。そこに２．１と同じ内容のHTMLコードがありますので、それを修正します。
なお、この変更を行った場合の Flash の動作について、当サイトでは保証致しません（単に背景に隠すことに着目した変更を行っているだけです）。予めご了承ください。
以下、BlogPet を例に説明します。
BlogPet のHTMLソースは下記のようになっています。
<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/hogehoge.js" charset="UTF-8"></script>リストの青色部分をマウスコピーして、ブラウザのURLに入力します。IEであればダウンロード画面になりますので、一旦ファイルとして保存します。Firefoxであればソースが表示されますので、全ての内容をマウスコピーしてください。
その内容は下記のようになっていると思います。
var today=new Date();
var tseconds=today.getSeconds();
document.write("<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='200' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usa.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='quality' value='high' /><param name='FlashVars' value='username=hogehoge&tseconds="+tseconds+"' /><embed src='http://www.blogpet.net/usa.swf' loop='false' menu='false' quality='high' bgcolor='#ffffff' width='130' height='200' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username=hogehoge&tseconds="+tseconds+"' /></object>");
document.write("<img src='http://www.blogpet.net/add_log.php?username=hogehoge&url="+document.URL+"&referrer="+document.referrer+"'>");上記のコードを script 要素で括り、２．１と同様に param 要素と embed 要素へ wmode 属性を追加します（青色部分）。
<script type="text/javascript">
var today=new Date();
var tseconds=today.getSeconds();
document.write("<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='200' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usa.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='quality' value='high' /><param name='FlashVars' value='username=hogehoge&tseconds="+tseconds+"' /><param name='wmode' value='transparent' /><embed src='http://www.blogpet.net/usa.swf' loop='false' menu='false' quality='high' bgcolor='#ffffff' width='130' height='200' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username=hogehoge&tseconds="+tseconds+"' wmode='transparent' /></object>");
document.write("<img src='http://www.blogpet.net/add_log.php?username=hogehoge&url="+document.URL+"&referrer="+document.referrer+"'>");
</script>追加する際の注意点として、２．１では属性値を「"」で括ってましたが、２．２では必ず「'」で括ってください。誤って「"」を使用すると表示されなくなります。
修正が終わったら、これまで設定していた表示用のHTMLコードと入れ替えます。
３．関連サイト
ネットを検索したところ、下記の情報がありました。日本語入力や実行速度についての問題が記されています。
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 追記
７項を追加しました。また記述の一部を修正しました。
