Select a site

FancyImageGallery widget: Implement the markup

After you FancyImageGallery widget: Create the web user control, you need to implement the markup for the new user widget in its .ASCX file. Then, you need to implement the code in the .JS file that will associate it with the markup.

In the markup of the FancyImageGallery.ascx add the following code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FancyImageGallery.ascx.cs" Inherits="SitefinityWebApp.CustomImageGallery.FancyImageGallery" %>
  
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
  
<sf:ResourceLinks ID="resourceLinks1" runat="server" UseEmbeddedThemes="false">
    <sf:ResourceFile Name="~/CustomImageGallery/FancyImageGallery.css" Static="true" />
    <sf:ResourceFile Name="~/CustomImageGallery/fancybox/jquery.fancybox-1.3.4.css" Static="true" />
</sf:ResourceLinks>
  
<ul>
    <asp:Repeater ID="ImageRepeater" ItemType="Telerik.Sitefinity.Libraries.Model.Image" runat="server">
        <ItemTemplate>
            <li>
                <a class="grouped_elements" rel="group1" href="<%# Eval("MediaUrl") %>">
                    <img class="thumbImg" src="<%# Eval("MediaUrl") %>" alt="image" />
                </a>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

In the code above, a simple <asp:Repeater> element that generates a <li> element for each image that is passed to it. The <sf:ResourceFile>  is used to load the .CSS file resources by passing their relative paths.

You now need to FancyImageGallery widget: Implement the client-side functionality of the new user widget.

Back To Top

Next: FancyImageGallery widget: Implement the client-side functionality