New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Sync thumbnail area with displayed image


Product RadImageGallery for ASP.NET AJAX


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.

<telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery2" DisplayAreaMode="Image" Width="600px"
    Visible="true" ImagesFolderPath="~/images">
        <ClientEvents OnImageGalleryCreated="OnImageGalleryCreated" />
    <ImageAreaSettings Height="500px" />
    <ThumbnailsAreaSettings Mode="Thumbnails" ShowScrollButtons="true" />
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


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

In this article