Image slideshow

Posted by Community Admin on 04-Aug-2018 07:41

Image slideshow

All Replies

Posted by Community Admin on 05-Dec-2013 00:00

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

Posted by Community Admin on 05-Dec-2013 00:00

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

Posted by Community Admin on 09-Dec-2013 00:00

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?

Posted by Community Admin on 10-Dec-2013 00:00

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

This thread is closed