Recently several Subtext users have asked how to integrate Lightbox JS into Subtext's photo galleries. My standard answer has been

Right now it's not possible because the control that renders the galleries emits links with relative URLs rather than fully qualified URLs. We'll look into making a change to the data binding mechanism for a future release - so hold tight!

I finally had a few spare cycles so I looked into the existing data binding logic and realized that it is possible to get the control to emit fully qualified URLs right now! Notice, I said it's possible, but I didn't say it's elegant.

How it works now

You'll need to edit your skin's GalleryThumbNail.ascx control. This control renders the thumbnail images for a given gallery using a simple asp:DataList control. The controller (code) that handles the GalleryThumbNail.ascx control looks for an asp:HyperLink control inside the DataList. It then populates the HyperLink with an ImageUrl, NavigationUrl, and ToolTip for each image in the gallery.

So your skin control probably looks like this:

<asp:DataList id="ThumbNails" runat="server" OnItemCreated="ImageCreated"
  RepeatColumns="4" RepeatDirection="Horizontal">
  <ItemTemplate>
    <asp:HyperLink Runat="server" ID="ThumbNailImage" CssClass="ThumbNail" />
  </ItemTemplate>
</asp:DataList>

Hack it to work now

<asp:DataList id="ThumbNails" runat="server"
  RepeatColumns="4" RepeatDirection="Horizontal">
    <ItemTemplate>
      <div class="thumbnail">
        <a href="<%# BaseImagePath + 
        ((Image) Container.DataItem).ResizedFile %>" 
        title="<%# ((Image) Container.DataItem).Title %>" 
        rel="lightbox[<%# ((Image) Container.DataItem).CategoryID %>]">
          <img src="<%# BaseImagePath + 
          ((Image) Container.DataItem).ThumbNailFile %>" 
          alt="<%# ((Image) Container.DataItem).Title %>" />    
      </a>
    </div>
  </ItemTemplate>
</asp:DataList>

NOTE: For brevity and to make it fit on the page, I've shortened the above code. You'll need to expand each of the five Image casts to use the fully qualified class name, Subtext.Framework.Components.Image.

Coming to a Subtext Installation Near You

I've made some changes for the next version of Subtext (the recently announced v1.9.6) that will make the data binding expressions a bit more concise and easier to read. So starting with the next release you'll be able to do this

<asp:DataList id="ThumbNails" runat="server"
  RepeatColumns="4" RepeatDirection="Horizontal">
    <ItemTemplate>
      <div class="thumbnail">
        <a href="<%# BaseImagePath + 
        EvalImage(Container.DataItem).ResizedFile %>" 
        title="<%# EvalImage(Container.DataItem).Title %>" 
        rel="lightbox[<%# EvalImage(Container.DataItem).CategoryID %>]">
          <img src="<%# BaseImagePath + 
          EvalImage(Container.DataItem).ThumbNailFile %>" 
          alt="<%# EvalImage(Container.DataItem).Title %>" />    
      </a>
    </div>
  </ItemTemplate>
</asp:DataList>

I'll play around with the controller some more to see if we can make the code even more expressive - but no promises!

See it in action!

You can see the Lightbox2 and Subtext Galleries integration in action in my galleries. Check this one out: On the Town...