jQuery 版の Lightbox plugin を実装してみました。基本的には バージョン 1.6.1 で実装したもの と同じですが、記事に書き込むスクリプトを簡略化しました。
以下の画像はダウンロードしたサンプルに含まれていたもので、サンプルと同様に、次の画像、前の画像を連続して表示できます。
gallery という id を持つ div タグの中に、a タグで囲った img 要素を 5 個並べて表示しています。jQuery のセレクタ $('#gallery a') で gallery の中にある a タグを探し、それに対して lightBox() というスクリプトで href 属性に指定した画像ファイルを Lightbox 中に表示するようにしています。
左の画像は、上の gallery という id を持つ div タグの外にあり、単独で表示される（上の画像と連続して表示されない）ようにしたものです。
a タグで rel="lightbox"（任意で可）として、$('a[rel^=lightbox]') という属性セレクタで rel 要素に lightbox という文字列を含む a タグを探し、それに対して lightBox() というスクリプトで href 属性に指定した画像ファイルを Lightbox 中に表示するようにしています。
BlogEngine.NET へのスクリプトファイルと css ファイルの指定の追加は、以下の Extension を用いました。マスターページに直接書き込む方が簡単ですが、その場合はすべてのテーマのマスターページに書かなければならず、スマートではないので。バージョン 1.6.1 のものとは少々異なります。Lightbox を起動するスクリプトの大半を Extension で RegisterClientScriptBlock メソッドを使用して自動的に書き込まれるようにしました。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BlogEngine.Core.Web.Controls;
using BlogEngine.Core;
using System.Web.UI.HtmlControls;
[Extension("Enable jQuery Lightbox plugin 0.5",
"1.0",
"<a target=\"_blank\" href=\"http://surferonwww.info/Default.aspx\">WebSurfer</a>")]
public class Lightbox
{
private string extensionName = "LightboxPlugin";
private static string scriptsFolder = "lightbox/script";
private static string lightboxScriptFilename =
"jquery.lightbox-0.5.pack.js";
private static string stylesFolder = "lightbox/css";
private static string cssFilename =
"jquery.lightbox-0.5.css";
private static string imageFolder =
Utils.RelativeWebRoot + "lightbox/images";
public Lightbox()
{
BlogEngine.Core.Post.Serving +=
new EventHandler<ServingEventArgs>(EnableLightbox);
}
private void EnableLightbox(object sender, ServingEventArgs e)
{
HttpContext context = HttpContext.Current;
if (context.CurrentHandler is System.Web.UI.Page)
{
if (context.Items[extensionName] == null)
{
System.Web.UI.Page page =
(System.Web.UI.Page)context.CurrentHandler;
page.Header.Controls.Add(
JavaScriptInclude(scriptsFolder +
"/" + lightboxScriptFilename));
HtmlLink lightboxCss = new HtmlLink();
lightboxCss.Attributes["type"] = "text/css";
lightboxCss.Attributes["rel"] = "stylesheet";
lightboxCss.Attributes["href"] =
Utils.RelativeWebRoot + stylesFolder +
"/" + cssFilename;
page.Header.Controls.Add(lightboxCss);
string csname = "LightboxEnablingScript";
Type cstype = this.GetType();
System.Web.UI.ClientScriptManager csm =
page.ClientScript;
if (!csm.IsClientScriptBlockRegistered(cstype, csname))
{
System.Text.StringBuilder sb =
new System.Text.StringBuilder();
sb.AppendLine(
"function EnableLightbox(jQueryObject) {");
sb.AppendLine("jQueryObject.lightBox({");
sb.AppendLine("imageLoading: '" + imageFolder +
"/lightbox-ico-loading.gif',");
sb.AppendLine("imageBtnClose: '" + imageFolder +
"/lightbox-btn-close.gif',");
sb.AppendLine("imageBtnPrev: '" + imageFolder +
"/lightbox-btn-prev.gif',");
sb.AppendLine("imageBtnNext: '" + imageFolder +
"/lightbox-btn-next.gif',");
sb.AppendLine("imageBlank: '" + imageFolder +
"/lightbox-blank.gif'");
sb.AppendLine("});");
sb.AppendLine("}");
csm.RegisterClientScriptBlock(
cstype, csname, sb.ToString(), true);
}
context.Items[extensionName] = 1;
}
}
}
private HtmlGenericControl JavaScriptInclude(string url)
{
HtmlGenericControl script =
new HtmlGenericControl("script");
script.Attributes["type"] = "text/javascript";
script.Attributes["src"] = ResolveScriptUrl(url);
return script;
}
private string ResolveScriptUrl(string url)
{
return Utils.RelativeWebRoot + "js.axd?path="
+ Utils.RelativeWebRoot + url;
}
}
自分でブログの記事中に書き込まなければならないスクリプトは以下のとおりです。これはバージョン 1.6.1 と比べて簡略化しました。それでも、今回の例で使った gallery や lightbox という名前を、ブログの記事を書くときに自由に指定できるようにしています。
<script type="text/javascript">
//<![CDATA[
$(function () {
EnableLightbox($('#gallery a'));
EnableLightbox($('a[rel^=lightbox]'));
});
//]]>
</script>
------------- 2011/7/3 追記 -------------
IE6, IE7, IE8 では Lightbox が動かないので調査したところ、BlogEngine.NET 2.0 に実装されている SyntaxHighlighter 3.0.83 の shCore.js が取り込まれると、jQuery.js の解析がうまくいかず、Lightbox2 のスクリプトから jQuery.js 内に定義されているメソッドか変数を参照できないことが問題であることがわかりました。
shCore.js と jquery.lightbox-0.5.pack.js を定義するスクリプトの順序が問題という話（shCore.js を先にしないとダメとのこと）がありましたので、変えてみましたが、効果はなかったです。また、jquery.js のバージョンを最新（これを書いている時点で 1.6.1）に変更してみましたが、これも効果はなかったです。
たぶん IE のパーサーなどの IE 内部の問題なので、調べても原因も解決策も分からないだろうと思い、これ以上の原因究明は止めました。
IE6, IE7, IE8 のパーサーが jquery.js をうまく解釈できていないということは、Lightbox 以外でも潜在的に問題があるかもしれないということなので、少なくとも BlogEngine.NET 1.6.1 では問題のなかった SyntaxHighlighter 2.0.320 を使うことにしました。
その結果、IE6, IE7, IE8 でも Lightbox は表示されるようになりました（IE7 は IETester ですが）。でも、Chrome, Opera では、Lighｔbox 問題なく表示されるものの、バックグラウンドの表示が変です。引き続き調査中です。
------------- 2011/10/18 追記 -------------
Chrome, Opera で、バックグラウンドの表示が変だったのは、CSS を BlogEngine.NET 標準のものから、ブログ１で使っているものに変えたら問題がなくなりました。結局なにが原因だったのか分かりません。（汗）