New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
Sync thumbnail area with displayed image
Environment
Product | RadImageGallery 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
- ImageGallery Client-side events article
- ImageGallery Functionality - Modes article