New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Sync thumbnail area with displayed image

Environment

ProductRadImageGallery for ASP.NET AJAX

Description

How to display the currently displayed image in the thumbnail image on page load? How can I force the Thumbnail Area to display the selected/displayed image in the ImageArea? When selecting a new image, the thumbnail does not sync with the selected image.

ASP.NET
<telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery2" DisplayAreaMode="Image" Width="600px"
    Visible="true" ImagesFolderPath="~/images">
    <ClientSettings>
        <ClientEvents OnImageGalleryCreated="OnImageGalleryCreated" />
    </ClientSettings>
    <ImageAreaSettings Height="500px" />
    <ThumbnailsAreaSettings Mode="Thumbnails" ShowScrollButtons="true" />
</telerik:RadImageGallery>
JavaScript
function OnImageGalleryCreated(sender, args) {
    sender.get_thumbnailsArea()._move(-1 * sender.get_selectedIndex() * sender.get_thumbnailsArea().get_thumbnailWidth())
}
           
function OnNavigated(sender, args) {
    var newPosition = -1 * sender.get_selectedIndex() * sender.get_thumbnailsArea().get_thumbnailWidth();
    var oldPosition = sender._thumbnailsArea._currentScrollPosition;
    sender.get_thumbnailsArea()._move(newPosition + oldPosition) // reset thumbs scroll
}

Solution

To show selected thumbnail image on page load, use the OnLoad client-side event. To keep the thumbnail images in sync with the selected images, use the OnNavigated client-side event:

See Also