jQuery 版の Lightbox plugin を実装してみました。以下の画像はダウンロードしたサンプルに含まれていたもので、サンプルと同様に、次の画像、前の画像を連続して表示できます。

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 を用いました。マスターページに直接書き込む方が簡単ですが、その場合はすべてのテーマのマスターページに書かなければならず、スマートではないので。

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 = "Scripts";
  private static string jQueryFilename = "jquery-1.4.1.min.js";
  private static string lightboxScriptFilename = 
    "jquery.lightbox-0.5.pack.js";
  private static string stylesFolder = "css";
  private static string cssFilename = "jquery.lightbox-0.5.css";
    
  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 + 
          "/" + jQueryFilename));
        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);

        context.Items[extensionName] = 1;
      }
    }
  }

  #region Private helper methods

  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; 
  }

  #endregion
}

jQuery のスクリプトは、ブログの中に直接書き込んでいます。今回の場合は以下の通りです。なぜかと言えば、今回の例で使った gallery や lightbox という名前を、ブログの記事を書くときに自由に指定したかったからです。

<script type="text/javascript">
//<![CDATA[
$(function () {
  $('#gallery a').lightBox({
    imageLoading: '/BlogEngine/Images/lightbox-ico-loading.gif',
    imageBtnClose: '/BlogEngine/Images/lightbox-btn-close.gif',
    imageBtnPrev: '/BlogEngine/Images/lightbox-btn-prev.gif',
    imageBtnNext: '/BlogEngine/Images/lightbox-btn-next.gif',
    imageBlank: '/BlogEngine/Images/lightbox-blank.gif'
  });
  $('a[rel^=lightbox]').lightBox({
    imageLoading: '/BlogEngine/Images/lightbox-ico-loading.gif',
    imageBtnClose: '/BlogEngine/Images/lightbox-btn-close.gif',
    imageBtnPrev: '/BlogEngine/Images/lightbox-btn-prev.gif',
    imageBtnNext: '/BlogEngine/Images/lightbox-btn-next.gif',
    imageBlank: '/BlogEngine/Images/lightbox-blank.gif'
  }); 
});
//]]>
</script>