Image Gallery Slideshow similar to Telerik RadRotator contro

Posted by Community Admin on 30-Sep-2012 00:00

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.

Posted by Community Admin on 01-Oct-2012 00:00

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.

Posted by Community Admin on 01-Oct-2012 00:00

Is there a code sample/example that can point me how to bind to an Image Library in Sitefinity as a DataSource?

Posted by Community Admin on 02-Oct-2012 00:00

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;

Posted by Community Admin on 02-Oct-2012 00:00

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();

Posted by Community Admin on 06-Oct-2012 00:00

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.

This thread is closed

All Replies