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 の場合、下記のサイトで配布されているプラグインが便利です。
sideblue weblog：[sb2] Addrel v0.01
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コードと入れ替えます。
３．関連サイト
ネットを検索したところ、下記の情報がありました。日本語入力や実行速度についての問題が記されています。
- Macromedia - Flash TechNote：背景が透明な Flash ムービーを作成する方法
- Macromedia - Flash TechNote：wmode を transparent に設定した際の注意点
- WEBLAB@AJIBIT：Flash/wmode
