Rotator with multiple images and text

8 posts, 0 answers
  1. Heather
    Heather avatar
    4 posts
    Member since:
    Nov 2010

    Posted 31 Oct 2013 Link to this post

    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!
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 05 Nov 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Heather
    Heather avatar
    4 posts
    Member since:
    Nov 2010

    Posted 07 Nov 2013 Link to this post

    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.
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 11 Nov 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Heather
    Heather avatar
    4 posts
    Member since:
    Nov 2010

    Posted 17 Nov 2013 Link to this post

    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 
  7. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 20 Nov 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Heather
    Heather avatar
    4 posts
    Member since:
    Nov 2010

    Posted 10 Mar 2014 Link to this post

    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
  9. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 13 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017