gotoItemByIndex Method

Summary

Scroll to the top-left of an item giving its index.

Syntax

JavaScript Syntax

ImageViewer.prototype.gotoItemByIndex = function(index)

TypeScript Syntax

gotoItemByIndex(index: number): void;

Parameters

index

The 0-based index of the item

Remarks

To go to an item, use GotoItem, to go to an item by its index, use GotoItemByIndex.

The "GoTo" methods scrolls the viewer so the top-left portion of the item is visible in the current control boundary without changing the other transformation properties.

To ensure that an item is visible, use EnsureItemVisible, to ensure an item is visible giving its index, use EnsureItemVisibleByIndex.

The "Ensure" methods scrolls the viewer the minimum required to ensure the item is fully visible in the current control boundary without changing the other transformation property. If the item is already fully visible, then nothing happens. If the item is larger than the current control boundary, then the viewer will scrolls the minimum amount required where any of the edges (top-left, top-right, bottom-left or bottom-right) is visible.

For more information refer to Image Viewer Layouts, Image Viewer Appearance, Image Viewer Items, Image Viewer Transformation, and Image Viewer Bounds and Transform.

Example

This example will add a few items to the viewer and then allows the user to go to an item.

Run the demo and click the Example button.

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.itemPadding = lt.Controls.ControlPadding.create(8, 8, 8, 20); 
this._imageViewer.imageBorderThickness = 1; 
 
// 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; 
   item.text = "Item " + (page - 1).toString(); 
   this._imageViewer.items.add(item); 
} 
 
// Add a combobox control to show the items 
var comboBox = document.getElementById("combo"); 
 
// Add an entry for each item to the combo box 
for (var i = 0; i < this._imageViewer.items.count; i++) { 
   var item = this._imageViewer.items.item(i); 
   var option = document.createElement("option"); 
   option.textContent = item.text; 
   comboBox.appendChild(option); 
} 
 
var myImageViewer = this._imageViewer; 
comboBox.addEventListener("change", function () { 
   var index = comboBox.selectedIndex; 
   // And go to it 
   myImageViewer.gotoItemByIndex(index); 
});

Requirements

Target Platforms

Reference

ImageViewer Class

ImageViewer Members

Leadtools.Controls Namespace

Help Version 19.0.2017.10.27

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies