ImGearThumbnailList class

This is an ASP.NET client control for viewing a list of document pages represented as thumbnails.

Syntax

ASP.NET Ajax Javascript (Specification)
ImageGear.Web.UI.ImGearThumbnailList = function() {};

ASP.NET Ajax Javascript (Usage)
var instanceVar = new ImageGear.Web.UI.ImGearThumbnailList();

Remarks

This ASP.NET client control is a viewer for viewing a list of thumbnails. It displays thumbnails for each of the pages that are included in the ImGearPageCollection for every document in the ImGearDocumentCollection. Each of these control contains one ImGearDocumentCollection object.

This control represents a list of thumbnails, so if you wish to show thumbnails in your application then you will need to have one ImGearThumbnailList control on your web page for the document pages you wish to display as thumbnails.

The control optionally allows you to use your own CSS class definitions for the display of the thumbnails within it. For details of CSS class definitions, refer to the the property description for useDefaultStyling. By default, it uses the built in style.

While it is possible to create an instance of this control using client-side JavaScript, you can also create it by placing a server-side ImGearThumbnailList control on an .aspx page. Using the server side approach lets you do data binding for the images in the thumbnails. For details, refer to the server side API for the ImGearThumbnailList control. If you are creating the control using the clientside API, then in your application code, you need to access your image repository to obtain the documentIdentifier values for the ImGearDocument objects that are added to the ImGearThumbnailList control's ImGearDocumentCollection.

Example 1:

There are two ways to create this control using the client-side JavaScript API,

1. Using the Microsoft Ajax library

2. Using the jQuery plugins.

Note: Both methods will not do any postbacks to the server. Also, you can not use jQuery plugins if you are using Microsft Ajax library.

Take the following steps to create client side controls:

Add an empty <DIV> to your HTML.

Give your <DIV> a unique ID (example: ImGearThumbnailList1).

Give your <DIV> a size, using either a CSS style sheet or an inline style. If using CSS style, make sure to use the CSS class names as listed under the property useDefaultStyling

If using Microsft Ajax library, add the following code to your page that creates an instance of the ImGearThumbnailList control.

$create(ImageGear.Web.UI.ImGearThumbnailList, { artServiceOption: ImageGear.Web.UI.ImGearArtDataServices.ArtDataService, thumbnailCaptionFormat: "{DC}:Page {P#}"}, null, null, $get("ImGearThumbnailList1"));

If using ImGearThumbnailListPlugin jQuery plugin, proceed with the following code wrapped inside the code that checks if the browser document is ready:

$(document).ready(function () { });

Note: The options parameter is an an object that takes all the properties for the control that can be set.

$("#ImGearThumbnailList1").ImGearThumbnailListPlugin({ artServiceOption: ImageGear.Web.UI.ImGearArtDataServices.ArtDataService, thumbnailCaptionFormat: "{DC}:Page {P#}", layout: ImageGear.Web.UI.ImGearThumbnailLayout.VerticalScrollDirection});

The default thumbnails layout setting in the control is ImGearThumbnailLayout.VerticalScrollDirection in the enumeration definition ImGearThumbnailLayout. In this example code, we will be using the default value. The number of columns in the control is determined by the width of a thumbnail item and the width of the control. The number of rows will depend on the number of pages in the document collection of the control. if the width of the control is set to greater than at least two thumbnail widths amount, the control will have a multi column grid. However, if the width of the control is less than two thumbnail widths, a single vertical column control will be obtained. If you want your thumbnails to be arranged in a single horizontal line, set the property layout to ImageGear.Web.UI.ImGearThumbnailLayout.HorizontalScrollDirection.

Example 2:

Create Documents and add them to the control.

Add the following code to create an instance of a ImGearDocument.

var _doc = new ImageGear.Web.UI.ImGearDocument({documentIdentifier: "MyImage.tif", includeAllPages:true, imageServicePath:"ImageGearService.svc" });

//set the includeAllPages property of the ImGearDocument to true so that all pages in Multi-page tif file (MyImage.tif) are displayed as thumbnails.

_doc.set_includeAllPages(true);

//If using Microsft ajax library, add ImGearDocument object to the ImGearThumbnailList control whose id is 'ImGearThumbnailList1'.

"$find('ImGearThumbnailList1').get_documents().addDocument(_doc);

If using jQuery plugins, add the documents as shown above, to the control with the following code:

$("#ImGearThumbnailList1").ImGearThumbnailListPlugin().get_documents().addDocument(_doc);

We have selected the default setting for the layout property. If the width of the control can fit only one column of thumbnails, then it will be a single vertical column of thumbnails.

If you want your thumbnails to be arranged in a single horizontal line, set the property layout from the enumeration definition ImageGear.Web.UI.ImGearThumbnailLayout.HorizontalScrollDirection

Inheritance Hierarchy

Object
   Sys.Component
      Sys.UI.Control
         ImageGear.Web.UI.ImGearThumbnailList

Reference

ImageGear.Web.UI Namespace