When designing this new theme, I knew that designing the gallery would be important and a lot of work. I wanted an AJAX feel if possible, but I didn't want to have to go through a huge learning curve just for that. So when I saw the AJAX Gallery Review on Smashing Magazine, I thought I would implement one of them. The one that I thought was most interesting was Slimbox. Implementing this was far easier than I could have ever imagined. Here is the process:

1. Go to Slimbox and download the bits.
2. Download the mootools framework choosing all the features listed here. The default Packer compression is ok, even though it mentions PHP.
3. Extract the files to your web directories. I put slimbox.js and the mootools js file in the common directory of my theme, then the slimbox.css in the style folder.
4. On any page I want the AJAX effect to show up, I include the following code. Since I am using master pages, this is inside a asp:content block:

   <CSControl:Script ID="Script1" runat="server" Src="~/Themes/BW/Common/mootools.v1.11.js" />
   <CSControl:Script ID="Script2" runat="server" Src="~/Themes/BW/Common/slimbox.js" />
   

5. Add the link for your images. Since I am using CS2007, I have a CSGallery:GalleryPostData tag with the following content. The magic happens with the linkrel value. You need to have the word lightbox in there. Anything in square brackets after lightbox is used as a group name so that lightbox knows what other photos it can view in the same session. Go ahead, hover over the picture and click the Next link, or just press the N key.

   <CSGallery:GalleryPostData runat="server" Tag="span" LinkTo="Image" LinkRel="lightbox[Gallery]">

6. Here is the full code listing from the Gallery page to prove to you that there really was nothing else I had to do.

   <%@ Page Language="C#" MasterPageFile="../common/BW.master" AutoEventWireup="true"
       Inherits="CommunityServer.Controls.CSThemePage" %>
   
   <%@ Import Namespace="CommunityServer.Components" %>
   <%@ Register TagPrefix="MW" TagName="CSBadge" Src="~/Themes/BW/Common/CSBadge.ascx" %>
   <%@ Register TagPrefix="MW" TagName="RecentImagesSB" Src="~/Themes/BW/Common/RecentImages.ascx" %>
   <%@ Register TagPrefix="MW" TagName="TechnovangelistLogin" Src="~/Themes/BW/Common/TechnovangelistLogin.ascx" %>
   <%@ Register TagPrefix="MW" TagName="Subscriptions" Src="~/Themes/BW/Common/Subscriptions.ascx" %>
   <%@ Register TagPrefix="MW" TagName="PhotoTagCloud" Src="~/Themes/BW/Common/PhotoTagCloud.ascx" %>
   
   <asp:Content ID="Content1" ContentPlaceHolderID="PageHead" runat="Server">
   </asp:Content>
   <asp:Content ID="Content2" ContentPlaceHolderID="SiteContent" runat="Server">
       <CSControl:Script ID="Script1" runat="server" Src="~/Themes/BW/Common/mootools.v1.11.js" />
       <CSControl:Script ID="Script2" runat="server" Src="~/Themes/BW/Common/slimbox.js" />
   
           <CSGallery:GalleryData Property="Name" LinkTo="ViewGallery" runat="server" CssClass="ContentTitle" />
           <div class="CommonContent">
               <CSGallery:GalleryData ID="GalleryData2" Property="Description" runat="server" />
               <div class="ClearLeft">
                   &nbsp;</div>
           </div>
           <div class="CommonContent">
               <h3 class="ContentHeader">
                   Photos</h3>
               <CSGallery:GalleryPostList runat="server">
                   <QueryOverrides runat=server PagerID="Pager" PageSize="45" />
                   <ItemTemplate>
                       <CSGallery:GalleryPostData runat="server" Tag="span" LinkTo="Image" LinkRel="lightbox[Gallery]">
                           <ContentTemplate>
                               <CSGallery:GalleryPostImage ImageType="thumbnail" Height="100"
                                   Quality="60" runat="server" />
                           </ContentTemplate>
                       </CSGallery:GalleryPostData>
                   </ItemTemplate>
                   <NoneTemplate>
                       <div class="CommonBodyContent">
                           <CSControl:ResourceControl runat="server" ResourceName="ForumMembers_NoRecords"
                               Tag="Em" />
                       </div>
                   </NoneTemplate>
               </CSGallery:GalleryPostList>
               <div class="PictureListControls">
                   <div class="PictureListPager">
                       <CSControl:Pager ID="Pager" runat="server" ShowTotalSummary="true" />
                   </div>
               </div>
           </div>
   </asp:Content>
   

Setting this up was so incredibly simple. I was shocked at how easy it was. And I think the effect is fantastic. Do you like this or would you prefer the standard static gallery view???