Select a site

FancyImageGallery widget: Implement the server-side functionality

After you FancyImageGallery widget: Implement the client-side functionality, you need to implement the code-behind and the logic of the widget.

To implement the required code, in your project, select the custom widget class. In this case, this is the FancyImageGallery.ascx.cs class. Paste the following code and then build your project:

using System;
using System.Linq;
using System.Web.UI;
using Telerik.Sitefinity.GenericContent.Model;
using Telerik.Sitefinity.Modules.Libraries;
  
namespace SitefinityWebApp.CustomImageGallery
{
    public partial class FancyImageGallery : System.Web.UI.UserControl
    {
        protected void Page_PreRender(object sender, EventArgs e)
        {
            InitPage();
        }
  
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                var librariesManager = LibrariesManager.GetManager();
                var images = librariesManager.GetImages().Where(i => i.Status == ContentLifecycleStatus.Live);
                this.ImageRepeater.DataSource = images;
                this.ImageRepeater.DataBind();
            }
        }
  
        private void InitPage()
        {
            var scriptManager = ScriptManager.GetCurrent(Page);
  
            if (scriptManager == null) return;
  
            // Adding jQuery version 1.4.4 from a CDN
            scriptManager.Scripts.Add(new ScriptReference { Path = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" });
  
            // Adding the Fancybox library
            scriptManager.Scripts.Add(new ScriptReference { Path = "~/CustomImageGallery/fancybox/jquery.fancybox-1.3.4.pack.js" });
  
            // Adding a custom Javascript resource
            scriptManager.Scripts.Add(new ScriptReference { Path = "~/CustomImageGallery/FancyImageGallery.js" });
        }
    }
}

In the code above, the Page_Load method uses the LibrariesManager to get all the images that are in status Live. Those images are then passed to the repeater.

To add Javascript resources you use a separate method InitPage(). This method gets the ScriptManager for the current page, and using its Scripts property adds a reference to the Javascript resources by passing their relative paths.

Finally, you must FancyImageGallery widget: Register the widget in Sitefinity's backend.

Back To Top

Next: FancyImageGallery widget: Register the widget in Sitefinity CMS's backend