Send comments on this topic. | Back to Introduction - All Topics | Help Version 15.12.21
WebThumbnailViewer JavaScript Client Class

WebThumbnailViewer Client Object

The LEADTOOLS WebThumbnailViewer control includes a client-side Javascript class to update the server control without posting the entire page back to the server. Most of the WebThumbnailViewer server properties can be accessed through the Javascript class. You can access the LEADTOOLS WebThumbnailViewer control on the client-side by using the ASP.NET generated ClientID on the WebForm.

Client Naming

The client-side version of the control uses the same naming convention as the server control version for easier coding. All Leadtools public class definitions in WebThumbnailViewer.js and Utilities.js contains the prefix "ltwf" to avoid conflicts with any other components on the page.

Client Public Methods/Properties

All server side object properties can be accessed on the client by using two methods: "GetServerPropertyName", and "SetServerPropertyName", where “ServerPropertyName” is replaced with the name of the property to be accessed or set.

The following table lists the Server properties and the mapped client methods:

Property\Method Name(Server) Method Name(Client) Description Input Type
N/A ID Gets the web control identifier generated by ASP.NET. -
BackColor

getBackColor():string

setBackColor(value:String)

Gets or sets the background color of the control.

String representing the CSS background color.
BorderColor

getBorderColor():string

setBorderColor(value:String)

Gets or sets the border color of the control.

String representing the CSS border color.
BorderStyle

getBorderStyle():string

setBorderStyle(value:String)

Gets or sets the border style of the control.

String representing the CSS border style.
BorderWidth

getBorderWidth():int

setBorderWidth(value:Int32)

Gets or sets the border width of the web control.

Int32 representing the border width of the web control.
Columns

getColumns():int

setColumns(value:Int32)

Gets or sets the number of columns of thumbnails there will be.

Int32 representing the number of columns of thumbnails.
Count

getCount():int

Gets the number of thumbnails in the viewer.

-
Width

getWidth():int

setWidth(value:Int32)

Gets or sets the width of the web control in pixels.

Int32 representing the width of the web control.
Height

getHeight():int

setHeight(value:Int32)

Gets or sets the height of the web control in pixels.

Int32 representing the height of the web control.
HorizontalAlignMode

getHorizontalAlignMode():ImageViewerAlignMode

setHorizontalAlignMode(value:ImageViewerAlignMode)

Gets or sets the horizontal alignment used when displaying the image.

ImageViewerAlignMode representing the horizontal alignment used when displaying the image.

(0-2), 0:Near, 1:Center, 2:Far
LayoutDirection

getLayoutDirection():LayoutDirection

setLayoutDirection(value:LayoutDirection)

Gets or sets the orientation of the thumbnail viewer.

LayoutDirection representing the orientation of the thumbnail viewer.

(0-1), 0:Horizontal, 1:Vertical
ResourcesPath

getResourcesPath():String

Gets the virtual path to where resources(icons, scripts) are located.

 -
Rows

getRows():int

setRows(value:Int32)

Gets or sets the number of rows of thumbnails there will be.

Int32 representing the number of rows of thumbnails there will be.
SelectedIndex

getSelectedIndex():int

setSelectedIndex(value:Int32)

Gets or sets the 0-based index of the selected thumbnail.

Int32 representing the 0-based index of the selected thumbnail.
SelectedThumbStyle

getSelectedThumbStyle():ThumbnailStyle

Gets the style of the selected thumbnail.

 -
GetThumbnailInfo

getThumbnailInfo():ltwfThumbInfo Client Class

Gets information about a specific thumbnail element.

 -
ThumbPadding

getThumbPadding():int

setThumbPadding(value:Int32)

Gets or sets the number of pixels padded around each thumbnail.

Int32 representing the number of pixels padded around each thumbnail.
ThumbsDirection

getThumbsDirection():ThumbnailsDirection

setThumbsDirection(value:ThumbnailsDirection)

Gets or sets the flow of the thumbnails.images.

ThumbnailsDirection represents the flow of the thumbnails.images.

(0-1), 0:LeftToRight, 1:TopToBottom

ThumbSize

getThumbSize():ltwfSize Client Class

setThumbSize(value:ltwfSize Client Class)

Gets or sets the size (width/height) in pixels of the thumbnail.

ltwfSize Client Class representing the size (width/height) in pixels of the thumbnail.
ThumbSpacing

getThumbSpacing():int

setThumbSpacing(value:Int32)

Gets or sets the number of pixels between each two adjacent thumbnails.

Int32 representing the number of pixels between each two adjacent thumbnails.
ThumbStyle

getThumbStyle():ThumbnailStyle

Gets the style of the unselected thumbnail.

 -
Tooltip

getTooltip():string

setTooltip(value:String)

Gets the text displayed when the mouse hovers over the web control.

String representing the text displayed when the mouse hovers over the web control.

VerticalAlignMode

getVerticalAlignMode():ImageViewerAlignMode

setVerticalAlignMode(value:ImageViewerAlignMode)

Gets or sets the vertical alignment to display the image.

ImageViewerAlignMode (0-2), 0:Near, 1:Center, 2:Far.

ViewerID

getViewerID():string

Gets the ID of the WebImageViewer used to display the selected thumbnail.

-
Visible

getVisible():bool

setVisible(value:Boolean)

Gets or sets whether show/hide the control on the web page.

String representing whether to show\hide the control.

true to show the control; false to hide it.
N/A Update(viewer: WebImageViewer); Updates the current selected thumbnail element's image by the image of the passed WebImageViewer control.

viewer: The client javascript representation of the WebImageViewer control.

Client Public Events

All public client-side Leadtools events can be overridden with your own function. The following example displays a Javascript alert whenever the SelectedIndex property is changed on the WebThumbnailViewer client object.


WebThumbnailViewer1.SelectedIndexChanged = mySelectedIndexChanged;
function mySelectedIndexChanged()
{
  alert("SelectedIndex Changed!");
}

The following table lists the client-side events that can be overridden:

Event Name(Server) Event Name(Client) Raised when

N/A

BackColorChanged

BackColor property is changed.

N/A

BorderColorChanged

BorderColor property is changed.

N/A

BorderStyleChanged

BorderStyle property is changed.

N/A

BorderWidthChanged

BorderWidth property is changed.

PropertyChanged

ColumnsChanged

Columns property is changed.

PropertyChanged

HorizontalAlignModeChanged

HorizontalAlignMode property is changed.

PropertyChanged

LayoutDirectionChanged

LayoutDirection property is changed.

PropertyChanged

RowsChanged

Rows property is changed.

PropertyChanged

SelectedIndexChanged

SelectedIndex property is changed.

PropertyChanged

SelectedThumbStyleChanged

SelectedThumbStyle property is changed.

PropertyChanged

ThumbPaddingChanged

ThumbPadding property is changed.

PropertyChanged

ThumbsDirectionChanged

ThumbsDirection property is changed.

PropertyChanged

ThumbSizeChanged

ThumbSize property is changed.

PropertyChanged

ThumbSpacingChanged

ThumbSpacing property is changed.

PropertyChanged

ThumbStyleChanged

ThumbStyle property is changed.

PropertyChanged

VerticalAlignModeChanged

VerticalAlignMode property is changed.

PropertyChanged

VerticalAlignModeChanged

VerticalAlignMode property is changed.

N/A

VisibileChanged

Visibile property is changed.