How To: Integrate the AJAX Gallery Viewer with CS2007

Jun 18, 2007 22:53 · 1015 words · 5 minutes read communityserver

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" />
            <p>
            </p>
    
            <li>
              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. <div style="border-right: gray 1px solid;padding-right: 4px;border-top: gray 1px solid;padding-left: 4px;font-size: 8pt;padding-bottom: 4px;margin: 20px 0px 10px;overflow: auto;border-left: gray 1px solid;width: 97.5%;cursor: text;line-height: 12pt;padding-top: 4px;border-bottom: gray 1px solid;font-family: consolas, 'Courier New', courier, monospace;background-color: #f4f4f4">
                <pre style="padding-right: 0px;padding-left: 0px;font-size: 8pt;padding-bottom: 0px;margin: 0em;overflow: visible;width: 100%;color: black;border-top-style: none;line-height: 12pt;padding-top: 0px;font-family: consolas, 'Courier New', courier, monospace;border-right-style: none;border-left-style: none;background-color: #f4f4f4;border-bottom-style: none"><span style="color: #0000ff">&lt;</span><span style="color: #800000">CSGallery:GalleryPostData</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span> <span style="color: #ff0000">Tag</span><span style="color: #0000ff">="span"</span> <span style="color: #ff0000">LinkTo</span><span style="color: #0000ff">="Image"</span> <span style="color: #ff0000">LinkRel</span><span style="color: #0000ff">="lightbox[Gallery]"</span><span style="color: #0000ff">&gt;</span></pre>
              </div>
    
              <p>
              </p>
    
              <li>
                Here is the full code listing from the Gallery page to prove to you that there really was nothing else I had to do. <div style="border-right: gray 1px solid;padding-right: 4px;border-top: gray 1px solid;padding-left: 4px;font-size: 8pt;padding-bottom: 4px;margin: 20px 0px 10px;overflow: auto;border-left: gray 1px solid;width: 97.5%;cursor: text;line-height: 12pt;padding-top: 4px;border-bottom: gray 1px solid;font-family: consolas, 'Courier New', courier, monospace;background-color: #f4f4f4">
                  <pre style="padding-right: 0px;padding-left: 0px;font-size: 8pt;padding-bottom: 0px;margin: 0em;overflow: visible;width: 100%;color: black;border-top-style: none;line-height: 12pt;padding-top: 0px;font-family: consolas, 'Courier New', courier, monospace;border-right-style: none;border-left-style: none;background-color: #f4f4f4;border-bottom-style: none"><span style="background-color: #ffff00">&lt;%@ Page Language="C#" MasterPageFile="../common/BW.master" AutoEventWireup="true"<br />    Inherits="CommunityServer.Controls.CSThemePage" %&gt;</span><br /><br /><span style="background-color: #ffff00"></span><br /><span style="background-color: #ffff00"></span><br /><span style="background-color: #ffff00"></span><br /><span style="background-color: #ffff00"></span><br /><span style="background-color: #ffff00"></span><br /><span style="background-color: #ffff00"></span><br /><br /><span style="color: #0000ff">&lt;</span><span style="color: #800000">asp:Content</span> <span style="color: #ff0000">ID</span><span style="color: #0000ff">="Content1"</span> <span style="color: #ff0000">ContentPlaceHolderID</span><span style="color: #0000ff">="PageHead"</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="Server"</span><span style="color: #0000ff">&gt;</span><br /><span style="color: #0000ff">&lt;/</span><span style="color: #800000">asp:Content</span><span style="color: #0000ff">&gt;</span><br /><span style="color: #0000ff">&lt;</span><span style="color: #800000">asp:Content</span> <span style="color: #ff0000">ID</span><span style="color: #0000ff">="Content2"</span> <span style="color: #ff0000">ContentPlaceHolderID</span><span style="color: #0000ff">="SiteContent"</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="Server"</span><span style="color: #0000ff">&gt;</span><br />    <span style="color: #0000ff">&lt;</span><span style="color: #800000">CSControl:Script</span> <span style="color: #ff0000">ID</span><span style="color: #0000ff">="Script1"</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span> <span style="color: #ff0000">Src</span><span style="color: #0000ff">="~/Themes/BW/Common/mootools.v1.11.js"</span> <span style="color: #0000ff">/&gt;</span><br />    <span style="color: #0000ff">&lt;</span><span style="color: #800000">CSControl:Script</span> <span style="color: #ff0000">ID</span><span style="color: #0000ff">="Script2"</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span> <span style="color: #ff0000">Src</span><span style="color: #0000ff">="~/Themes/BW/Common/slimbox.js"</span> <span style="color: #0000ff">/&gt;</span><br /><br />        <span style="color: #0000ff">&lt;</span><span style="color: #800000">CSGallery:GalleryData</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="Name"</span> <span style="color: #ff0000">LinkTo</span><span style="color: #0000ff">="ViewGallery"</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span> <span style="color: #ff0000">CssClass</span><span style="color: #0000ff">="ContentTitle"</span> <span style="color: #0000ff">/&gt;</span><br />        <span style="color: #0000ff">&lt;</span><span style="color: #800000">div</span> <span style="color: #ff0000">class</span><span style="color: #0000ff">="CommonContent"</span><span style="color: #0000ff">&gt;</span><br />            <span style="color: #0000ff">&lt;</span><span style="color: #800000">CSGallery:GalleryData</span> <span style="color: #ff0000">ID</span><span style="color: #0000ff">="GalleryData2"</span> <span style="color: #ff0000">Property</span><span style="color: #0000ff">="Description"</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span> <span style="color: #0000ff">/&gt;</span><br />            <span style="color: #0000ff">&lt;</span><span style="color: #800000">div</span> <span style="color: #ff0000">class</span><span style="color: #0000ff">="ClearLeft"</span><span style="color: #0000ff">&gt;</span><br />                <span style="color: #ff0000">&nbsp;</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span><br />        <span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span><br />        <span style="color: #0000ff">&lt;</span><span style="color: #800000">div</span> <span style="color: #ff0000">class</span><span style="color: #0000ff">="CommonContent"</span><span style="color: #0000ff">&gt;</span><br />            <span style="color: #0000ff">&lt;</span><span style="color: #800000">h3</span> <span style="color: #ff0000">class</span><span style="color: #0000ff">="ContentHeader"</span><span style="color: #0000ff">&gt;</span><br />                Photos<span style="color: #0000ff">&lt;/</span><span style="color: #800000">h3</span><span style="color: #0000ff">&gt;</span><br />            <span style="color: #0000ff">&lt;</span><span style="color: #800000">CSGallery:GalleryPostList</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span><span style="color: #0000ff">&gt;</span><br />                <span style="color: #0000ff">&lt;</span><span style="color: #800000">QueryOverrides</span> <span style="color: #ff0000">runat</span>=<span style="color: #ff0000">server</span> <span style="color: #ff0000">PagerID</span><span style="color: #0000ff">="Pager"</span> <span style="color: #ff0000">PageSize</span><span style="color: #0000ff">="45"</span> <span style="color: #0000ff">/&gt;</span><br />                <span style="color: #0000ff">&lt;</span><span style="color: #800000">ItemTemplate</span><span style="color: #0000ff">&gt;</span><br />                    <span style="color: #0000ff">&lt;</span><span style="color: #800000">CSGallery:GalleryPostData</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span> <span style="color: #ff0000">Tag</span><span style="color: #0000ff">="span"</span> <span style="color: #ff0000">LinkTo</span><span style="color: #0000ff">="Image"</span> <span style="color: #ff0000">LinkRel</span><span style="color: #0000ff">="lightbox[Gallery]"</span><span style="color: #0000ff">&gt;</span><br />                        <span style="color: #0000ff">&lt;</span><span style="color: #800000">ContentTemplate</span><span style="color: #0000ff">&gt;</span><br />                            <span style="color: #0000ff">&lt;</span><span style="color: #800000">CSGallery:GalleryPostImage</span> <span style="color: #ff0000">ImageType</span><span style="color: #0000ff">="thumbnail"</span> <span style="color: #ff0000">Height</span><span style="color: #0000ff">="100"</span><br />                                <span style="color: #ff0000">Quality</span><span style="color: #0000ff">="60"</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span> <span style="color: #0000ff">/&gt;</span><br />                        <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ContentTemplate</span><span style="color: #0000ff">&gt;</span><br />                    <span style="color: #0000ff">&lt;/</span><span style="color: #800000">CSGallery:GalleryPostData</span><span style="color: #0000ff">&gt;</span><br />                <span style="color: #0000ff">&lt;/</span><span style="color: #800000">ItemTemplate</span><span style="color: #0000ff">&gt;</span><br />                <span style="color: #0000ff">&lt;</span><span style="color: #800000">NoneTemplate</span><span style="color: #0000ff">&gt;</span><br />                    <span style="color: #0000ff">&lt;</span><span style="color: #800000">div</span> <span style="color: #ff0000">class</span><span style="color: #0000ff">="CommonBodyContent"</span><span style="color: #0000ff">&gt;</span><br />                        <span style="color: #0000ff">&lt;</span><span style="color: #800000">CSControl:ResourceControl</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span> <span style="color: #ff0000">ResourceName</span><span style="color: #0000ff">="ForumMembers_NoRecords"</span><br />                            <span style="color: #ff0000">Tag</span><span style="color: #0000ff">="Em"</span> <span style="color: #0000ff">/&gt;</span><br />                    <span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span><br />                <span style="color: #0000ff">&lt;/</span><span style="color: #800000">NoneTemplate</span><span style="color: #0000ff">&gt;</span><br />            <span style="color: #0000ff">&lt;/</span><span style="color: #800000">CSGallery:GalleryPostList</span><span style="color: #0000ff">&gt;</span><br />            <span style="color: #0000ff">&lt;</span><span style="color: #800000">div</span> <span style="color: #ff0000">class</span><span style="color: #0000ff">="PictureListControls"</span><span style="color: #0000ff">&gt;</span><br />                <span style="color: #0000ff">&lt;</span><span style="color: #800000">div</span> <span style="color: #ff0000">class</span><span style="color: #0000ff">="PictureListPager"</span><span style="color: #0000ff">&gt;</span><br />                    <span style="color: #0000ff">&lt;</span><span style="color: #800000">CSControl:Pager</span> <span style="color: #ff0000">ID</span><span style="color: #0000ff">="Pager"</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span> <span style="color: #ff0000">ShowTotalSummary</span><span style="color: #0000ff">="true"</span> <span style="color: #0000ff">/&gt;</span><br />                <span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span><br />            <span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span><br />        <span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span><br /><span style="color: #0000ff">&lt;/</span><span style="color: #800000">asp:Content</span><span style="color: #0000ff">&gt;</span><br /></pre>
                </div>
              </li></ol> 
    
              <p>
              </p>
    
              <p>
                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???
              </p>
    
              <p>
                </div>