GotoItemByIndex Method

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

Syntax

JavaScript

 function Leadtools.Controls.ImageViewer.gotoItemByIndex( 
   index 
)

Parameters

Parameter	Type	Description
index	int	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

// 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);
});

GotoItemByIndex Method

Parameters

Reference