Rotator with multiple images and text

[Heather]

I am trying to create a rotator that has a button control with three images, then under those images there is text and then when you hit the button control three new images with three new text files show up.  I haven't seen any examples that show this functionality.  Can someone please provide an example of this.

Thanks in advance!

[Slav]

Hi Heather,

You can configure the layout of the RadRotator items via the inner property ItemTemplate in order to place an image and a text inside.

The rotator can be configured to display three items at once via the instructions in this help article. The RotatorType property should be set to Buttons so that the items are rotated by clicking a control button.

You can find attached a sample that demonstrates the described setup. Please use it as a reference for achieving the desired functionality.

Regards,
Slav
Telerik

[Heather]

Thanks so much for your response!  I do have one more question.  I want to make the height and width of my rotator 100% of whatever div tag it is embedded in.  If I set the variable to 100% then it isn't working correctly.  Is there a way to make this 100% and if so what exactly do I need to do?  I'm making my code for the site in a way that it can be viewed the same on a mobile or computer so I need this flexibility in-order for it to function properly.

Thanks.

[Slav]

Hi Heather,

The RadRotator does not support size in percentage as it works with fixed width and height. Nevertheless, there is a customization that could help you resize it relatively to its container. Please check this Knowledge Base article and try the attached sample.

Regards,
Slav
Telerik

[Heather]

Ok so I have one final question.  When you set the datasource, you are also defiing what pictures to pull.  What if I want text to appear other than the image name?  Since the datasource is telling what image to pull and what text to pull at the same time, I'm not sure what to do to make this work to where I assign text and also have the image pull for that particular image.  Example text for Barcelona Image:  This is an image of beautiful Barcelona and then the image that pulls for this text is the barcelona.jpg.  How can I achieve this?

Thanks,
Heather 

[Slav]

Hi Heather,

You can configure the layout of the RadRotator items via its inner property ItemTemplate. As an example, please check the online demo Image Gallery. The text that appears below each picture is the path to the image file and it is specified in the item template:

...
<ItemTemplate>
     <div class="itemTemplate">
          <img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' alt='gallery image'
               class="RotatorImage" /><br />
          <%#  DataBinder.Eval(Container.DataItem, "Image")%>
     </div>
</ItemTemplate>
...

Regards,
Slav
Telerik

[Heather]

We are actually changing the way we our doing our rotator and I have a couple of styling questions.  I want there to be space in-between the menu items that I'm using.  Is there a way that we can putting spacing in-between the items that appear?  Also, I want to use my own images for the arrows instead of the ones that come out of the box.  Is this possible?  I also want to make the box that appears on outline of the rotator invisible.  Is there a way to do this as well?

Thanks in advance!
Heather

[Slav]

Hello Heather,

If you want to add space between the RadRotator items, you can configure a container with margin in the ItemTemplate. For example, you can check the demo Rotator - Image Gallery that I linked previously. Note that in each item there is a div element with margin applied via the CSS class RotatorImage, which creates space between the images in the items.

The same demo shows how to configure custom buttons for the rotator via the inner property ControlButtons. You just need to create an HTML element for each of the buttons, for example an input of type button, and specify their IDs in ControlButtons as it is done in the demo.

The border around the view port of the rotator can be removed via the following CSS override:

div.RadRotator div.rrClipRegion
{
 border: none;
 box-shadow: none;
}

Regards,
Slav
Telerik