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

Forums / Developing with Sitefinity / Image slideshow

Image slideshow

4 posts, 0 answered
  1. wing
    wing avatar
    10 posts
    Registered:
    25 Nov 2013
    05 Dec 2013
    Link to this post
    HI everyone, 
    I want to make a image slideshow in my pages.I find that there is a Rotator in  Telerik.Web.UI. Can I using it to achieve my slideshow? and how?

     Also, I find a forum thread 

    http://www.sitefinity.com/developer-network/forums/general-discussions-/slide-images-automatically

    Someone made a widget but I cant use it since my version is 6.2

    Cheers,
    Wing

  2. Anjeza Llapi
    Anjeza Llapi avatar
    10 posts
    Registered:
    04 Nov 2013
    05 Dec 2013
    Link to this post
    Hello,

    In order to make an image slideshow in your pages you need to create  image rotators control. Please  refer to the NewsRotator sample in Sitefinity documentation which gives you a tutorial on how to build a control that can rotate images with the help of RadRotator control which main functionality is to rotate a set of images and apply different effects on them.
    The rotator control can be used in Sitefinity the same way it is used on a standard ASP.NET user control. After creating the control register it in Administration->Settings->Advanced->Toolboxes->Toolboxes as also described in the  documentation mentioned above.

    The NewsRotator sample is also available in Sitefinity SDK which you can download from your own account.

    Regards,
    Anjeza Llapi
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. wing
    wing avatar
    10 posts
    Registered:
    25 Nov 2013
    09 Dec 2013 in reply to Anjeza Llapi
    Link to this post
    Thanks for your help.
    Now, I can made the Rotate slideshow.
    On the other hand, I want to change the logic in the Page_Load such that I can call the image from the specific library. Can you give me some coding example to me?

  4. Anjeza Llapi
    Anjeza Llapi avatar
    10 posts
    Registered:
    04 Nov 2013
    10 Dec 2013
    Link to this post
    Hello,

     I would advise you  to take a look at our NewsRotator control sample, where similar approach is taken except it is not pulling images, but news items. You can use similar query as the one used in the NewsRotator, but just alter it a bit to fit your needs and get the pages.

    Here is a sample code I have prepared for your convenience:

    protected void Page_Load(object sender, EventArgs e)
            {
                this.RadRotator1.DataSource = App.WorkWith()
                                                 .Pages().ThatArePublished().LocatedIn(PageLocation.Frontend)
                                                 .Get()                                           
                                                 .ToList()
                                                 .Join(App.WorkWith()
                                                          .Images()
                                                          .Get()
                                                          .Where(i => i.Parent.Title == "Thumbnails" && i.Status == ContentLifecycleStatus.Live),
                                                       item => item.Title.Value,
                                                       image => image.Title.Value,
                                                       (item, image) => new { PageItem = item, PageImage = image });
      
      
                this.RadRotator1.ItemDataBound += this.RadRotator1_ItemDataBound;
                this.RadRotator1.DataBind();
            }
      
            private void RadRotator1_ItemDataBound(object sender, RadRotatorEventArgs e)
            {
                var link = e.Item.FindControl("newsLink") as HyperLink;
                var image = e.Item.FindControl("newsImage") as Image;
                var title = e.Item.FindControl("newsTitle") as Label;
                  
      
                PageNode pageItem = (PageNode)TypeDescriptor.GetProperties(e.Item.DataItem)["PageItem"].GetValue(e.Item.DataItem);
                Telerik.Sitefinity.Libraries.Model.Image pageImage = (Telerik.Sitefinity.Libraries.Model.Image)TypeDescriptor.GetProperties(e.Item.DataItem)["PageImage"].GetValue(e.Item.DataItem);
      
                if (image != null) image.ImageUrl = pageImage.MediaUrl;
                if (title != null) title.Text = pageItem.Title;
                  
                if (link != null)
                {
                    link.NavigateUrl = DataResolver.Resolve(pageItem, "URL", null, pageItem.Id.ToString());
                }
            }

    You can compare it to the NewsRotator queries and you will find that the changes are minor in order to get the frontend pages. Additionally for this sample I am querying an image library called "Thumbnails". You can change that to the name of your library.

    There are also two 3rd party widget widgets that might be useful:
    A) Image rotator widget  on our marketplace, which I believe, will help you achieve your scenario
    B) Falafel Content Slider Widget which  will allow you to display any album into a sleek content slider.


    Regards,
    Anjeza Llapi
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
4 posts, 0 answered