Easy slide show in EPiServer with LyteBox

EPiPattern: In this blog post I will introduce FileSystemDataSource and tree handy methods that you should add to your toolbox: RegisterCssFile, RegisterScriptFile and GetPageDirectory.

Now and then there is a need to make a slide show in EPiServer. I want to share that I use a very handy little script called LyteBox written by Markus F. Hay.

i18n of LyteBox

The script contains some text strings in English. I have created a tweaked version of the script derived from version 3.22 from 2007-02-07 that only uses non language specific symbols. Download the i18n version of LyteBox here.

Hiding IFrames and Flash movies during LyteBox Slide Show

There is also a function that disables any flash movies so they will not interfere with the slide show that runs on top of the page in its own layer. A colleague mentioned that this function easily can be extended to hide iframe elements if you use that for ads or similar.

Just add the following code to line 795 if you need the functionality:

var iframes = this.doc.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
  iframes[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
}
 

Easy reference to CSS StyleSheets and JavaScript’s

There are two very handy functions available in the EPiServer TemplatePage class: RegisterCssFile and RegisterScriptFile. I always use them when I need a JavaScript or style sheet referenced form a page template or user control.

Activate LyteBox very easily in Page Load:

protected override void  OnLoad(EventArgs e)
{
    base.OnLoad(e);

    ImageFileSystemDataSource.Root = CurrentPage.GetPageDirectory(true).VirtualPath;
    ImageRepeater.DataBind();

    RegisterCssFile("~/Lytebox/lytebox.css");
    RegisterScriptFile("~/Lytebox/lytebox.js");
}

Notice that GetPageDirectory(true) can be dangerous if there is no page folder created for the page and the page is viewed by an ordinary visitor.

Building links for LyteBox with FileSystemDataSoruce

Add an FileSystemDataSource and a Repeater control to your page. The root folder is configured in Page Load (see above) and you want to set IncludeRoot property to false.

The Repeater constructs a a-tag with the rel-attribute that LyteBox uses.

<div id="Gallery">
     <EPiServer:FileSystemDataSource IncludeRoot="false" ID="ImageFileSystemDataSource" runat="server" />  
    <asp:Repeater ID="ImageRepeater" DataSourceID="ImageFileSystemDataSource" runat="server">   
        <ItemTemplate>
            <a Title='<%# HttpUtility.HtmlEncode(((EPiServer.Web.WebControls.FileSystemItem)(Container.DataItem)).Title) %>'
               href='<%# ((EPiServer.Web.WebControls.FileSystemItem)(Container.DataItem)).Path %>' 
               rel="lyteshow" runat="server">
                <%# ((EPiServer.Web.WebControls.FileSystemItem)(Container.DataItem)).Path %>
            </a>
        </ItemTemplate> 
    </asp:Repeater> 
</div>

And now you have a working page template that can show a slide show from a gallery of images that you just upload to the pages own page folder.