+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Image Gallery Slideshow similar to Telerik RadRotator control

Image Gallery Slideshow similar to Telerik RadRotator control

6 posts, 0 answered
  1. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    30 Sep 2012
    Link to this post
    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.
  2. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    01 Oct 2012
    Link to this post
    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.
  3. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    01 Oct 2012
    Link to this post
    Is there a code sample/example that can point me how to bind to an Image Library in Sitefinity as a DataSource?
  4. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    02 Oct 2012
    Link to this post
    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;
                }
            }
     
        }
    }

  5. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    02 Oct 2012
    Link to this post
    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();

  6. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    06 Oct 2012
    Link to this post
    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.  
6 posts, 0 answered