Image Gallery Slideshow similar to Telerik RadRotator control - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Image Gallery Slideshow similar to Telerik RadRotator control

  • Image Gallery Slideshow similar to Telerik RadRotator control
  • I would like to incorporate an Image Gallery slideshow that works in a manner similar to the Telerik RadRotator control whereby the images automatically scroll through themselves or end-users have the option to also click and view individual images as well.  I was also thinking about achieving this using jQuery UI but since the Telerik RadControls already ship with Sitefinity, this might be an easier solution.

    http://demos.telerik.com/aspnet-ajax/rotator/examples/default/defaultcs.aspx

    Any solutions or guidance would be much appreciated.

    Thanks.
  • Creating a widget to wrap a RadRotator is a fairly trivial process.

    The only complicating issue is, where/how to fetch/load the images.

    I guess that the most basic Sitefinity-centric approach would be to use a specific library, load the images from it into a generic list, make that list the Datasource for the rotator, and then bind it.
  • Is there a code sample/example that can point me how to bind to an Image Library in Sitefinity as a DataSource?
  • I don't know if there are existing examples - probably... but here is a basic starting point for you.

    Rotator.ascx
    <%@ Control Language="C#" enableviewstate="true" AutoEventWireup="true" CodeFile="Rotator.ascx.cs" Inherits="MyUserControls.Rotator" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
        <telerik:RadRotator id="RadRotator1" runat="server">
            <ItemTemplate>
                <asp:Image id="Image1" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Url") %>' />
            </ItemTemplate>
        </telerik:RadRotator>

    Rotator.ascx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
     
    using Telerik.Sitefinity.GenericContent.Model;
     
    namespace MyUserControls
        public partial class Rotator : System.Web.UI.UserControl
        
            protected override void  OnInit(EventArgs e)
            
                // Disable the cache on this control
                // I've had issues with RadRotator when the site's cache is enabled
                this.Context.Response.DisableKernelCache();
                this.Context.Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache);
                base.OnInit(e);
            
     
            protected void Page_Load(object sender, EventArgs e)
            
                // Obviously in a more complete control, you'd make these properties you can set.
                string libraryName = "MyLibrary";
                int height = 100;
                int width = 200;
     
                // Configure the Rotator to your requirements
                RadRotator1.RotatorType = Telerik.Web.UI.RotatorType.SlideShow;
                RadRotator1.SlideShowAnimation.Type = Telerik.Web.UI.Rotator.AnimationType.CrossFade;
                RadRotator1.SlideShowAnimation.Duration = 1000;
                RadRotator1.FrameDuration = 5000;
                RadRotator1.WrapFrames = true;
                RadRotator1.ScrollDirection = Telerik.Web.UI.RotatorScrollDirection.Left;
                RadRotator1.Height = System.Web.UI.WebControls.Unit.Pixel(height);
                RadRotator1.Width = System.Web.UI.WebControls.Unit.Pixel(width);
                // Configure the other Rotator settings appropriately.
     
     
                // Fetch the images from the specified library.        
                var images = Telerik.Sitefinity.App.WorkWith().Images().Where(d => d.Parent.Title.ToString() == libraryName && d.Status == ContentLifecycleStatus.Live).Get().ToList();
                 
                // Create a new List of Slides (see nested class below) to load into the ItemTemplate
                List<Slide> slides = new List<Slide>();
     
                // Step through the list of images
                foreach (Telerik.Sitefinity.Libraries.Model.Image image in images)
                
                    // Add a new Slide object and configure it
                    slides.Add(new Slide()
                    
                        Url = image.MediaUrl,
                        Name = image.Title,
                        Caption = image.Description
                    );
                
     
                // Set the Rotator's datasource to the list of Slide objects
                RadRotator1.DataSource = slides;
     
                // Bind the sucker
                RadRotator1.DataBind();
            
     
            // Slide class to load the ItemTemplate with
            public class Slide
            
                public string Url
                
                    get;
                    set;
                
                public string Name
                
                    get;
                    set;
                
                public string Caption
                
                    get;
                    set;
                
            
     
        

  • Note: You can simplify the code and bind the image list directly, just by using "MediaUrl" as the DataItem to bind to ImageUrl. I just added the extra step of a local class, to illustrate the concept of binding a generic list to the itemTemplate.

    <asp:Image id="Image1" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "MediaUrl") %>' />

    // Set the Rotator's datasource to the list of Images
    RadRotator1.DataSource = Telerik.Sitefinity.App.WorkWith().Images().Where(d => d.Parent.Title.ToString() == libraryName && d.Status == ContentLifecycleStatus.Live).Get().ToList();
     
    // Bind the sucker
    RadRotator1.DataBind();

  • I found that I can enable the RadRotator control in the Toolbox for Sitefinity.  In this case, all I would need to do is figure out how to bind to an existing Image Library from within the RadRotator control properties exposed in Sitefinity.

    Are there any ideas or thoughts on how to accomplish this?

    If not, what are the MediaUrl and LibraryName values that need to be used in the previously provided code sample?

    Thanks.