activeItem Property (ImageViewer)

Summary

Active item of this image viewer.

Syntax

JavaScript Syntax
Object.defineProperty(ImageViewer.prototype, 'activeItem', 
	get: function(), 
	set: function(value) 
) 
TypeScript Syntax
activeItem: ImageViewerItem; 

Property Value

The active item of this image viewer. This value cannot be null.

Remarks

For more information, refer to Image Viewer Items.

Example

This example will use the viewer as a single-selection enabled list of images and shows how to track the current active item.

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

JavaScript Example
// Clear all the images already the viewer 
this._imageViewer.items.clear(); 
// Use vertical view layout 
this._imageViewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
// Make sure the item size is larger than the image size (thumbnails mode) 
this._imageViewer.itemSize = lt.LeadSizeD.create(200, 200); 
this._imageViewer.imageBorderThickness = 1; 
// Change the active item background color 
this._imageViewer.activeItemBackgroundColor = "lightblue"; 
this._imageViewer.selectedItemBackgroundColor = "lightblue"; 
 
// Add 4 items to the viewer 
for (var page = 1; page <= 4; page++) { 
   var item = new lt.Controls.ImageViewerItem(); 
   var imageUrl = "http://demo.leadtools.com/images/png/ocr" + page.toString() + ".png"; 
   item.url = imageUrl; 
   this._imageViewer.items.add(item); 
} 
 
// Add the interface mode to select items (single) 
var selectItemsMode = new lt.Controls.ImageViewerSelectItemsInteractiveMode(); 
selectItemsMode.selectionMode = lt.Controls.ImageViewerSelectionMode.single; 
// Tell the mode to set the active item for us 
selectItemsMode.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSetActive; 
this._imageViewer.defaultInteractiveMode = selectItemsMode; 
 
// Hook to the ActiveItemChanged event and update the label 
this._imageViewer.activeItemChanged.add(function(sender, e) { 
   var index = this.items.indexOf(this.activeItem); 
   infoLabel.textContent = "ActiveIndex index is " + index.toString(); 
}); 

Requirements

Target Platforms

Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.
Leadtools.Controls Assembly
Click or drag to resize