Chrome rotator.showNext (Left) issue

[Christian]

We have an issue using Chrome where the rotator show empty image on showNext with left navigation, right works fine but when clicking left again two times the empty/white space appears and it wont restart from index 0 when navigating left. please see site below,

http://www.mrplant.se/

<div style="position:relative;">
<div ID="rotatorRight" style="display:none;" onclick="navigate('Right'); return false;"></div>
<div ID="rotatorLeft" style="display:none;" onclick="navigate('Left'); return false;"></div>
<div class="rotatorContainer">
    <telerik:RadRotator ID="RadRotator1" runat="server" PauseOnMouseOver="false" OnClientItemShowing="slideShowHandler" OnClientLoad="rotatorLoad" SlideShowAnimation-Type="CrossFade" SlideShowAnimation-Duration="8000" FrameDuration="4000" ScrollDuration="1200" ScrollDirection="Left" RotatorType="AutomaticAdvance" Visible="false">
        <ItemTemplate>
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Container.DataItem %>' AlternateText=""/>
        </ItemTemplate>
    </telerik:RadRotator>
</div>
</div>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
    function rotatorLoad(sender, eventArgs)
    {
        var count = sender.get_items().length;
        var rotatorRight = document.getElementById('rotatorRight');
        var rotatorLeft = document.getElementById('rotatorLeft');

        if (count < 2 || count == null || count == 'undefined') {
            rotatorRight.style.display = 'none';
            rotatorLeft.style.display = 'none';
        }
        else if (count > 0)
        {
            rotatorRight.style.display = 'block';
            rotatorLeft.style.display = 'block';
        }
    }

    function navigate(navigation)
    {
        var rotator = $find("<%=RadRotator1.ClientID %>");

        switch (navigation)
        {
            case "Right":
                rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right);
                break;
            case "Left":
                rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
                break;
        }
    }

    function slideShowHandler(sender, args)
    {
        var count = sender.get_items().length;
        var currentIndex = args.get_item().get_index() + 1;
        var rotatorRight = document.getElementById('rotatorRight');
        var rotatorLeft = document.getElementById('rotatorLeft');

        if (!sender.isScrollingForward())
        {
            if (currentIndex == 1)
            {
                rotatorRight.style.visibility = 'none';
            }
            else
            {
                rotatorRight.style.visibility = 'visible';
            }
        }

        if (count == 1) {
            rotatorLeft.style.visibility = 'none';
            rotatorRight.style.visibility = 'none';
        }

        if (currentIndex == count)
        {
            rotatorLeft.style.visibility = 'none';
        }
        else
        {
            rotatorLeft.style.visibility = 'visible';
        }

    }
</script>
</telerik:RadCodeBlock>

 

 

public partial class ucImageRotator : System.Web.UI.UserControl
{
    private string path;

    public string Path
    {
        get { return path; }
        set { path = value; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (path != "")
        {
            string virtualPath = "~/images/rotators/" + path;
            RadRotator1.DataSource = GetFilesInFolder(virtualPath);
            RadRotator1.DataBind();
        }
    }

    protected List<string> GetFilesInFolder(string path)
    {
        string physicalPathToFolder = Server.MapPath(path);
        List<string> virtualPathsCollection = new List<string>();

        if (Directory.Exists(physicalPathToFolder))
        {
            string[] physicalPathsCollection = System.IO.Directory.GetFiles(physicalPathToFolder);

            foreach (String file in physicalPathsCollection)
            {
                string virtualPath = VirtualPathUtility.AppendTrailingSlash(path) + System.IO.Path.GetFileName(file);
                if (System.IO.Path.GetExtension(file) == ".png")
                {
                    System.Drawing.Image objImage = System.Drawing.Image.FromFile(file);
                    int width = objImage.Width;
                    int height = objImage.Height;
                    RadRotator1.Height = height;
                    RadRotator1.Width = width;
                    virtualPathsCollection.Add(virtualPath);
                }
            }
            if (virtualPathsCollection.Count > 0)
            {
                this.Visible = true;
                RadRotator1.Visible = true;
            }
            else
            {
                this.Visible = false;
                RadRotator1.Visible = false;
            }
        }
        return virtualPathsCollection;
    }
}

 

 

 

[Ianko]

Hi Christian,

I have already answered you about that in the support ticket sent to us (ID: 948706). Please refer to it to continue the conversation there. 

As for anyone else interested on teh same matter, the suggestion is to set ItemWidth and ItemHeight properties with accurate values. By that, the generated item will have proper width and height. 

<telerik:RadRotator ID="RadRotator1" runat="server" PauseOnMouseOver="false"
    OnClientItemShowing="slideShowHandler" OnClientLoad="rotatorLoad" SlideShowAnimation-Type="CrossFade"
    SlideShowAnimation-Duration="8000" FrameDuration="4000" ScrollDuration="1200" ScrollDirection="Left"
    RotatorType="AutomaticAdvance" Visible="false" ItemHeight="349px" ItemWidth="980px">
    <ItemTemplate>
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Container.DataItem %>' AlternateText="" />
    </ItemTemplate>
</telerik:RadRotator>

Regards,
Ianko
Telerik

[Christian]

Ianko, just to let you and everyone else know, setting height and width sorted the issue. thank you!