Rotator with RadSlider for changing Duration

[Patrick]

Hi there,

I just want to ask, if it´s possible to change the duration of showing a picture (FrameDuration) with a javascript function feeded by a RadSlider?

Because I want my users to have the possibilty to change the showduration by their own. :)

I tried something like this:
JavaScript:

function ChangeDuration(sender, eventArgs) {

var rotator = document.getElementById("RadRotator1");

rotator.FrameDuration = sender.get_value(); //I think here is the problem!!! :/

document.getElementById('TextBox_Duration').value = parseInt(sender.get_value() / 1000) + " sec";

}

Rotator:

<telerik:RadRotator ID="RadRotator1" runat="server" FrameDuration="3000" SlideShowAnimation-Type="Fade"
            Width="800" Height="600" ItemWidth="800" ItemHeight="600" ScrollDirection="Left,Right"
           RotatorType="Buttons">
            <ItemTemplate>
                 "beatuiful pictures... ;)"
            </ItemTemplate>
            <ControlButtons LeftButtonID="prevButton" RightButtonID="nextButton" />
        </telerik:RadRotator>

RadSlider:

            <telerik:RadSlider ID="RadSlider_Slideshow" runat="server" Width="200px" MinimumValue="1000"
                MaximumValue="10000" Value="3000" Skin="Telerik" OnClientValueChange="ChangeDuration"/>

Thank you very much.

Greetings Patrick

[ManniAT]

Hi Patrick,

there are two mistakes in your javascript. I will explain the problems - and give you a solution.
I my example the rotator has the ID rRot.

First of all - the rotator is a server control. So what you set as an ID is not what it will be at runtime.
It will be something like ctl00_ContentPlaceholder_RadRo....
Anyhow there is a way to get the element like this:

var rotator = $find("<%= rRot.ClientID %>");

Next - FrameDuration does not seem to work - but from documentation (client side) you can find that there is a set_frameDuration method.
So bring the things together - on server side to have some data I did this:

class MyData {
    public string TheText { get; set; }
    public MyData(string strVal) {
        TheText = strVal;
    }
}
protected void Page_Load(object sender, EventArgs e) {
    List<MyData> lS = new List<MyData>();
    lS.Add(new MyData("One"));
    lS.Add(new MyData("Two"));
    lS.Add(new MyData("Three"));
    rRot.DataSource = lS;
    rRot.DataBind();
}

My page looks like this:

    <telerik:RadRotator runat="server" ID="rRot" Width="220px" Height="100px" FrameDuration="4000" ScrollDuration="900">
    <ItemTemplate>
    <div style="text-align: left;padding: 0px 250px 0px 50px;border: none;float: left;">
    <asp:Label runat="server" Text='<%# Eval("TheText") %>' />
    </div>
    </ItemTemplate>
    </telerik:RadRotator>
    <br />
      <telerik:RadSlider ID="RadSlider_Slideshow" runat="server" Width="200px" MinimumValue="100"
                MaximumValue="10000" Value="3000" Skin="Telerik" OnClientValueChange="ChangeDuration"/>  <br />
    <div id="txtOut">
    </div>

Almost the same you have - I only changed min at the slider to see the result better.
And last not least the magic you've been waiting for:

<script type="text/javascript">
function ChangeDuration(sender, eventArgs) {
    //alert("<%= rRot.ClientID %>");
    var rotator = $find("<%= rRot.ClientID %>");
    rotator.set_frameDuration(sender.get_value());
    txtOut.innerHTML = sender.get_value();
}
</script>

The commented alert is just there that you can see what I meant with "client ID looks something like..."

HTH

Manfred

[Patrick]

Thank you so much! :)

All I need was this:

rotator.set_frameDuration(sender.get_value());

The thing with the ClientID (rotator) doesn´t work... (brings an error in ff)

var rotator = $find("<% =RadRotator1.ClientID %>");

But without it works perfect:

var rotator = $find("RadRotator1");

You really helped me out.

Thank you. :)

[ManniAT]

You are welcome - I guess you have another solution than I (masterpage, radscriptmanager, radajaxmanger and so on).
By the way - if this fires an error in FF - it would also fire the error in IE.

Anyhow - it works for you - that counts :)

And a last word - in the next version of ASP.NET (major) this "guess what ID I'll get" will be solved - there you can define how IDs will be generated - which helps a lot - especially in CSS things and so on.

[Patrick]

Ok, thank you! :)

On last question.

Is it possible to start the "Slideshow" by a specified item of my datasource?

For example:

I have a gallery with previews and if I click on one of the pics it links to a slideshow (like in the browser in windows), now the slideshow should start at the picture which was choosen.

Is it necessary to manipulate my datasource, that the pic which was choosen is at first position of my datasource or are there any other solutions? Something like: "startWith", "startWithItem" or something else.

I tried it with: "CurrentIndex" but I don´t know how to use. Even if I put a number as Value -> CurrentIndex="3" it doesn´t work. It starts at the beginning of my datasource. In my datasource are all the pics as objects with name, picguid, folderguid, displayname, etc.!

Thank you!

Achja, Manfred: Grüße nach Österreich von deinem deutschen Nachbarn! ;)

Greetings Patrick

Edit:

Found a solution :)

        foreach (Picture picture in picture_list)
        {
            if ((picture.DataType.ToLower() == "jpg" || picture.DataType.ToLower() == "gif"))
            {
                if (picture.Displayname.Trim().Length > 16)
                {
                    picture.Displayname = picture.Displayname.Trim().Remove(16) + "...";
                }
                picture.DataType = "img";

                picture.Path = folder.Path;

                picture_list_new.Add(picture);

                if (picture.GUID.ToString() == Session["FileGUID"].ToString())
                {
                    index = i;
                }

                i++;
            }
        }
        RadRotator1.DataSource = picture_list_new;
        RadRotator1.DataBind();

        RadRotator1.InitialItemIndex = index;

[ManniAT]

Hi Patrick,

of course this is possible.
I do this in my current project for the following reason:
I have a masterpage with a rotator - when the user navigates Rotator would (without intervention) always start with the first item.
So I transfer the current item index to a webmethod and store it in a session variable.
And from this point on we are synchronized - we need to make the rotator start with that element (index).
My code looks like this:

RebindRotator();
            if (!IsPostBack) {
                if (Session["rotIDX"] != null) {
                    rrRot.InitialItemIndex = (int)Session["rotIDX"];
                }

rrRot of course is the rotator - and as you can see by the cast I use an integer variable to set the "start index" of the rotator.

Regards

Manfred
PS: Danke für die deutschen Grüße - und Servus aus Österreich :)

[Patrick]

Thank you.

Found a solution by my own. As you can see it´s nearly the same! I´m also working with a session variable, but I put the GUID from my picture in it! ;)

Ok, works great.

Thank you for your support.

Have a nice weekend. Weather seems to be great. :)