Home : WebThumbnailviewer - JavaScript API Reference (Legacy Web Controls)
Q10356 - INFO: WebThumbnailviewer - JavaScript API Reference (Legacy Web Controls)

Legacy Controls NOTICE

This article references our legacy Web Forms Web Viewing controls (WebImageViewer, WebAnnotationViewer, WebThumbnailViewer). It is preserved for archival purposes, but support strongly recommends using our modern HTML5 web controls: WebDocumentViewer, WebDocumentThumbnailer instead)

http://atalasupport.net/demos/LegacyDemos-11.1/WebViewingDemo.zip

Main Article Content

 

atalaWebThumbnailViewer

Although this function is public, it is not intended for users to create WebThumbnailViewers on the client side directly. The server side generated HTML is needed for this function to initialize.

Properties

Server Name JavaScript Syntax : Return value Description
ClientID ID() : string Gets the server control identifier generated by ASP.NET.
N/A Form() : object Gets the form object that the Web server control is on.
AllowMultiSelect getAllowMultiSelect() : bool
Gets a value that allows multiple thumbs to be selected using the shift or ctrl keys.
AllowDragDrop getAllowDragDrop() : bool
Gets a value that allows thumbnails to be dragged and dropped inside the bounds of the control.
AutoDragDrop getAutoDragDrop() : bool
Gets a value that determines whether thumbnail reordering will be automatically handled on the client-side.
BackColor getBackColor() : string
setBackColor(value: string)
Gets or sets the background color of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
BorderColor getBorderColor() : string
setBorderColor(value: string)
Gets or sets the inner border color of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
BorderStyle getBorderStyle() : string
setBorderStyle(value: string)
Gets or sets the outer border style used for this Web server control.

Expected input: string representing CSS Style: '1px solid #FF9900'
BorderWidth getBorderWidth() : int
setBorderWidth(value: int)
Gets or sets the inner border width of the Web server control.

Expected input: int representing the number of pixels wide.
BrowserFormat getBrowserFormat : int Gets the format of the images created for browser output.

Returns an int: 0:Jpeg 1:Png 2:Gif 3:Auto
CachePath getCachePath() : string Gets the file path used for the file cache as specified in the Web.config file.
Caption getCaption() : string
setCaption(value: string)
Gets or sets a string used for creating a caption under the Web server control. HTML syntax is allowed.

Note: This property is tied to a hidden input tag, so changing this value to HTML in JavaScript could cause problems if the page needs to PostBack.
Centered getCentered() : bool
setCentered(value: bool)
Gets or sets a value indicating if the image is centered when the image is smaller than the Web server control.
Columns getColumns() : int
setColumns
(value: int)
Gets or sets the number of columns (0 means auto)
N/A ClearThumbs() Clears all currently loaded thumbnails.
Columns getColumns() : int
setColumns
(value: int)
Gets or sets the number of columns (0 means auto)
Count getCount() : int Gets the number of thumbnails.
FlowDirection getFlowDirection() : int Gets the FlowDirection enumeration for how the thumbnails are laid out.
Font getFont() : string
setFont(value: string)
Gets or sets the font name associated with the Web server control.

Expected input: string representing font name: 'verdana'
ForeColor getForeColor() : string
setForeColor(value: string)
Gets or sets the foreground color (typically the color of the text) of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
Height getHeight() : int
setHeight(value: int)
Gets or sets the height of the Web server control in pixels.
ImageDisplayOrder getImageDisplayOrder() : int Gets the order that thumbs are loaded.
Layout getLayout() : int Gets the Layout set on the server.
MouseTool getMouseToolLeft() : int
getMouseToolRight
() : int
setMouseTool(left: int, right: int)
Gets or sets the behavior of the mouse when interacting with the viewable area.

Expected input: MouseToolType or int from 0-7, 0:None 1:Center 2:Selection 3:ZoomIn 4:ZoomOut 5:ZoomArea 6:Pan 7:PassThrough
MouseTool.Cursor getMouseToolCursor() : int
setMouseToolCursor(value : int)
Gets or sets the cursor used with the mouse tool.

Expected input: MouseToolCursor or int from 0-8, 0:Auto 1:Arrow 2:Crosshair 3:Grab 4:Hand 5:Move 6:ZoomIn 7:ZoomOut 8:Custom
Note: Currently, Grab is a CSS Extension supported by Mozilla based browsers only.
MouseTool.CustomCursor getMouseToolCustomCursor() : string
setMouseToolCustomCursor(value : string)
Gets or sets a value that represents the custom CSS style used for the MouseTool.

Expected input: string representing Style: 'wait' or 'url(MyCursor.cur)'
Note: Url based CSS cursor styles may not work in all browsers.
PathToResources getPathToResources() : string Gets the virtual path to where the image, script, and cursor files are located.
Rows getRows() : int
setRows
(value: int)
Gets or sets the number of rows (0 means auto)
ScrollBarVisibility getScrollBarVisibility() : int
setScrollBarVisibility
(value : int)
Gets or sets the visibility of the scrollbars.

Expected input: ScrollBarVisibility or int: 0:Dynamic 1:None 2:Always
ScrollPosition getScrollPosition() : atalaPoint
setScrollPosition(value : atalaPoint)
Gets or sets the upper left image position in relation to the upper left corner of the Web server control.

Expected input: atalaPoint
SearchPattern getSearchPattern() : string
setSearchPattern(value: string)
Gets or sets a semi-colon separated list of file search patterns for loading images from a directory.
SelectedIndex getSelectedIndex() : int Gets the index of the selected thumbnail. If AllowMultiSelect is true, it has the index of the most recently selected thumb.
SelectedIndexes getSelectedIndexes(): Array Gets an array of integers which are the indexes selected in the thumbnail control. If AllowMultiSelect is false, this array will have an length of 1, and contain the same index as SeletedIndex. If AllowMultiSelect is true, it will have a list of all of the selected thumbs in the order they were selected.
N/A getThumbCaption(value: int) : string Gets the caption for the thumbnail at the specified index.
ThumbCaptionFormat getThumbCaptionFormat() : string Gets the caption format specified on the server side.
N/A getThumbOrder() : Array Gets an array of integers which correspond to the thumbnails in the thumbnail control. As DragDrop events occur, this array will reorder itself to correspond to the positions of the thumbnails in the control.
Note: This function is only meant to be called when AutoDragDrop is enabled. If the value is set to false, this function will throw an exception.
ThumbPadding getThumbPadding() : int Gets the number of pixels around each thumbnail.
ThumbSize getThumbSize() : atalaSize Gets the size of each thumbnail.
ThumbSpacing getThumbSpacing() : int Gets the number of pixels between thumbs.
TitleBar getTitleBar() : string
setTitleBar(value: string)
Gets or sets a string used for a creating a title bar above the Web server control. HTML syntax is allowed.

Note: This property is tied to a hidden input tag, so changing this value to HTML in JavaScript could cause problems if the page needs to PostBack.
Url getUrl() : string Gets the URL representing the current image.
ViewerID getViewerID() : string Gets the ID of the WebImageViewer associated with this control.
ViewPortSize getViewPortSize() : atalaSize Gets the size of the viewable area, excluding scroll bars.
Visibility getVisibility() : string
setVisibility(value: string)
Gets or sets a value that indicates whether the Web server control is hidden or visible on the page.

Expected input: string that is either 'hidden', 'visible', or 'inherit'.
Note: 'inherit' will return VisibilityStyle.Visible on the server side.
Width getWidth() : int
setWidth(value: int)
Gets or sets the CSS width style property of the server control.

Expected input: string representing style width: '200px'
Zoom getZoom() : float
setZoom(value : float)
Gets or sets the zoom level of the thumbnails in relation to their original size, for this Web server control.

Events

Server Name JavaScript Syntax Description
N/A BackColorChanged = function() Fired when the BackColor property changes.
N/A BorderColorChanged = function() Fired when the BorderColor property changes.
N/A BorderStyleChanged = function() Fired when the BorderStyle property changes.
N/A BorderWidthChanged = function() Fired when the BorderWidth property changes.
N/A CaptionChanged = function() Fired when the Caption property changes.
CenteredChanged CenteredChanged = function() Fired when the Centered property changes.
N/A CountChanged = function() Fired when the number of thumbnails changes.
N/A FontChanged = function() Fired when the Font property changes.
N/A ForeColorChanged = function() Fired when the ForeColor property changes.
N/A MouseToolChanged = function() Fired when the MouseTool property has changed.
N/A ScrollPositionChanged = function() Fired when the scroll position changes.
N/A SelectedIndexChanged = function() Fired when the selected thumbnail changes.
N/A SizeChanged = function() Fired when the size changes.
N/A TitleBarChanged = function() Fired when the title bar changes.
N/A UrlChanged = function() Fired when the URL changes.
N/A VisibilityChanged = function() Fired when the Visibility property changes.
N/A ZoomChanged = function() Fired when the Zoom property has changed.

Thumbnail Events

Note: These events pertain to all thumbnails, and attempt to pass a ThumbnailEvent or ThumbnailDropEvent object to the function.
N/A ThumbnailClicked = function(e) Fires when the thumb is clicked. Passes a ThumbnailEvent object.
N/A ThumbnailDoubleClicked = function(e) Fires when the thumb is double clicked. Passes a ThumbnailEvent object.
N/A ThumbnailMouseDown = function(e) Fires when a mouse button is pressed down on the thumb. Passes a ThumbnailEvent object.
N/A ThumbnailMouseDownLeft = function(e) Fires when the when the left mouse button is pressed down on the thumb. Passes a ThumbnailEvent object.
N/A ThumbnailMouseDownRight = function(e) Fires when the when the right mouse button is pressed down on the thumb. Passes a ThumbnailEvent object.
N/A ThumbnailMouseMove = function(e) Fires when the mouse cursor moves over the thumb. Passes a ThumbnailEvent object.
N/A ThumbnailMouseOut = function(e) Fires when the mouse cursor leaves the thumb bounding box. Passes a ThumbnailEvent object.
N/A ThumbnailMouseOver = function(e) Fires when the mouse cursor enters the thumb bounding box. Passes a ThumbnailEvent object.
N/A ThumbnailMouseUp = function(e) Fires when a mouse button is released on the thumb. Passes a ThumbnailEvent object.
N/A ThumbnailRightClicked = function(e) Fires when the thumb is right clicked. Passes a ThumbnailEvent object.
N/A ThumbnailLoaded = function(e) Fires when the image part of the thumbnail has finished loading. Passes a ThumbnailEvent object.
N/A ThumbnailDrop = function(e) Fires when a thumbnail has been dragged and dropped to a new location. Passes a ThumbnailDropEvent object.
N/A ThumbnailDropServer = function(e) Fires after the server has has been notified of a drag-drop operation. Passes a ThumbnailDropEvent object.

Key Events

Note: The control must have focus for these events to fire. You can programmatically set focus to this control by calling Focus(). These events also attempt to pass a ThumbnailKeyEvent object to the function.
N/A KeyDown = function(e) Fires when a key is pressed down, if the control has focus. Passes a ThumbnailKeyEvent object.
N/A KeyUp = function(e) Fires when a key is released, if the control has focus. Passes a ThumbnailKeyEvent object.
N/A KeyPress = function(e) Fires when a key is pressed down, and then released, if the control has focus. Passes a ThumbnailKeyEvent object.

Methods

Server Name JavaScript Syntax Description
N/A Focus() Puts focus on the WebThumbnailViewer, used to enable key events.
N/A Invalidate() Forces the WebThumbnailViewer to re-position child objects.
OpenUrl OpenUrl(url: string)
OpenUrl(dir: string, searchPattern: string)
Opens a URL. If the URL is an image, searchPattern should not be passed. If the URL is a directory, pass a searchPattern to use to match files (Use "*.*" to match all files).

searchPattern expected input: string with semi-colon delimited search patterns (ex: "*.*", "*.tif;*.jpg". "*.gif")
N/A PauseRefresh() Pauses UI updates for this control until ResumeRefresh is called. Pauses and Refreshes are nestable. The update happens when an equal number of ResumeRefresh and PauseRefresh calls are made.
N/A ResumeRefresh() Resumes paused UI updates for this control. Pauses and Refreshes are nestable. The update happens when an equal number of ResumeRefresh and PauseRefresh calls are made.
SelectedIndex SelectThumb(index: int) Selects the thumbnail at the corresponding index (starting at 0)
N/A Update() Forces the control to update thumbnails.
N/A UpdateThumb(index: int) Forces the control to update the thumbnail at the corresponding index (starting at 0)

ThumbnailEvent

This object is based on the browser's mouse event object, where applicable. The following properties are in addition to the properties that are specified by each individual browser.

Usage:

JavaScript Copy Code
/* You will need a WebThumbnailViewer and a reference to ClientTools.js before this snippet.
 * This reference is automatically added to the page inline with the WebControls,
 * so placing this snippet below the WebThumbnailViewer control will be sufficient.
 */
Atalasoft.Utils.InitClientScript(BindThumbnailMouseEvents);
function BindThumbnailMouseEvents(){
   WebThumbnailViewer1.ThumbnailDoubleClicked = ThumbnailMouseEventExample;
   WebThumbnailViewer1.ThumbnailRightClicked = ThumbnailMouseEventExample;
}

// This simple example alerts the user when a thumbnail is double or right clicked.
function ThumbnailMouseEventExample(e){
   alert(e.name + ' event fired on thumbnail at index ' + e.index);
}

Server Name JavaScript Syntax : Return value Description
N/A index : int The zero based index of the thumbnail that this event is firing on.
N/A name : string The name of the event that is being fired.
N/A type : string The browser's event type that this event is based on, if any. Ex: 'mouseover'.

ThumbnailDropEvent

This object is based on the browser's mouse event object. The following properties are in addition to the properties that are specified by each individual browser.

Usage:

JavaScript Copy Code
/* You will need a WebThumbnailViewer and a reference to ClientTools.js before this snippet.
 * This reference is automatically added to the page inline with the WebControls,
 * so placing this snippet below the WebThumbnailViewer control will be sufficient.
 */

Atalasoft.Utils.InitClientScript(BindDropEvent);
function BindDropEvent(){
   WebThumbnailViewer1.ThumbnailDrop = ThumbnailDropped;
}

// This simple example alerts the user when a thumbnail is dragged and dropped.
function ThumbnailDropped(e){
   alert('Thumbnail dragged from index: ' + e.dragIndex + ' was dropped to index: ' + e.dropIndex);
}

Server Name JavaScript Syntax : Return value Description
N/A dragIndex : int The zero based index of the thumbnail, in relation to where it was dragged from.
N/A dropIndex : int The zero based index of the thumbnail, in relation to where it was dropped.
N/A name : string The name of the event that is being fired.


ThumbnailKeyEvent

This object is based on the browser's key event object. The following properties are in addition to the properties that are specified by each individual browser (unless otherwise specified).

Usage:

JavaScript Copy Code
/* You will need a WebThumbnailViewer and a reference to ClientTools.js before this snippet.
 * This reference is automatically added to the page inline with the WebControls,
 * so placing this snippet below the WebThumbnailViewer control will be sufficient.
 */
Atalasoft.Utils.InitClientScript(BindThumbnailKeyEvents);
function BindThumbnailKeyEvents(){
   WebThumbnailViewer1.KeyDown = ThumbnailKeyEventExample;
   WebThumbnailViewer1.Focus();
}

// Binds the up and down arrow keys to select previous and next thumbnails
// NOTE: the keyCodes used in this example were tested in Internet Explorer, FireFox,
//       Safari, and Chrome. The keyCodes for other browsers may be different.
function ThumbnailKeyEventExample(e){
   // Get the keyCode for the key that was pressed
   var myKeyCode = e.keyCode;
   var n = WebThumbnailViewer1.getSelectedIndex();
   var c = WebThumbnailViewer1.getCount();

   if (myKeyCode == 38){
      // up arrow was pressed, subtract one from SelectedIndex, and check lower bounds
      n = (n - 1 >= 0) ? n - 1 : 0;

      // select the previous thumbnail
      WebThumbnailViewer1.SelectThumb(n);

      // stop the default KeyUp action of scrolling, by returning false
      return false;
   }
   else if (myKeyCode == 40){
      // down arrow was pressed, add one to SelectedIndex, and check upper bounds
      n = (n + 1 < c) ? n + 1 : c - 1;

      // select the next thumbnail
      WebThumbnailViewer1.SelectThumb(n);

      // stop the default KeyUp action of scrolling, by returning false
      return false;
   }
}

Properties

Server Name JavaScript Syntax : Return value Description
N/A altKey : bool Returns true if the alt key is pressed in combination with this key event, false otherwise.
N/A ctrlKey : bool Returns true if the ctrl key is pressed in combination with this key event, false otherwise.
N/A keyCode : int The browser's specific key code for keyup or keydown typed events, returns ASCII code on keypress typed events.

Note: This property is populated by the browser, and may not be the same value across all browsers.
N/A shiftKey : bool Returns true if the shift key is pressed in combination with this key event, false otherwise.
N/A name : string The name of the event that is being fired.
N/A type : string The browser's key event type that this event is based on. Ex: 'keyup'.

Related Articles
No Related Articles Available.

Article Attachments
No Attachments Available.

Related External Links
No Related Links Available.
Help us improve this article...
What did you think of this article?

poor 
1
2
3
4
5
6
7
8
9
10

 excellent
Tell us why you rated the content this way. (optional)
 
Approved Comments...
No user comments available for this article.

Powered By InstantKB.NET v1.3
Copyright © 2002, 2019. InstantASP Ltd. All Rights Reserved