JC Thumb Viewer - Properties
Overview | Properties | Methods | Events | XML | ActionScript 3.0 usage | User Manual
Most of these properties can be set in the JCThumbViewer Panel (Window > Other Panels > JCThumbViewer Panel), also can be set from XML, using the config optional parameter.
Property | Type JCThumbViewer Panel |
Description |
_targetInstanceName | String yes |
The instance name of the target display object that will load the large images, video or other content associated to the items. That display object will act as a loader. |
alignMode | String yes |
The type of horizontal and vertical alignment used for the content. Possible values are topLeft, topMiddle, topRight, centerLeft, centerMiddle, centerRight, bottomLeft, bottomMiddle, bottomRight. The default value is topLeft. |
autoPlay | Boolean yes |
Specifies whether the component will automatically play a slide show by consecutively selecting the items. If _targetInstanceName is set, the thumbnail scroller will automatically set the target display object's source property to load the content associated to the selected item. The default value is false. |
autoPlayDelay | Number yes |
The time interval measured in seconds when the slide show will change the selected item. The default value is 5 seconds. |
config | XML/String no |
Sets the configuration xml for the component. In this case the component will be set up using the values in the xml data and will disregard any previous settings made from the panel or by using code. You can also set up the component using external configuration XML files. In this case you need to specify the URL to that configuration XML file. |
direction | String yes |
The way the items will be displayed in the scroller. Possible values are horizontal and vertical. The default value is horizontal. |
easeType | String yes |
The type of easing applied for the scrolling movement of the thumbnails. Possible values are easeIn, easeOut, easeInOut and easeNone. The default value is easeOut. |
firstVisibleItem | int yes |
The 0-based index of the first item visible in the thumbnail scroller. The default value is 0. |
itemHeight | Number yes |
The height of the thumbnails measured in pixels. Note: For best results make sure the itemHeight matches the actual thumbnail image height in pixels and use the "exactFit" scale mode. The default value is 100. |
items | Array no |
[read-only] The list of objects representing the references to the thumbnails. Each object is of type ScrollerItemModel. For details about the ScrollerItemModel class please refer to the section called Class ScrollerItemModel. |
itemSpace | Number yes |
The size of the space between the thumbnails. The default value is 5. |
itemWidth | Number yes |
The width of the items measured in pixels. Note: For best results make sure the itemWidth matches the actual thumbnail image width in pixels and use the "exactFit" scale mode. The default value is 100. |
length | int no |
[read-only] The number of items in the list. |
margins | Number yes |
The left and right side spacing of the component if the direction is set to horizontal or the top and bottom spacing if the direction is set to vertical. The default value is 5. |
navigationType | String yes |
The type of navigation used to scroll the list of items. Possible values are:
The default value is mouseRelative. |
scaleMode | String yes |
The type of scaling applied on the content of the items (thumbnails). Possible values:
Note: Some filters will not work correctly with the scaleCrop and scale settings unless their refresh property is set to false (unchecked). Note: For best results make sure the itemWidth and itemHeight match the actual thumbnail image width and height in pixels and use the "exactFit" scale mode. The default value is exactFit. |
selectedIndex | int yes |
Set or get the index of the selected item in the list. The index is 0-based, meaning that the index of the first item is 0, the index of the second item is 1 and the index of the last item is length - 1. The default value is 0. |
selectedItem | ScrollerItemModel no |
[read-only] A reference to the currently selected item. The reference is of type ScrollerItemModel and contains details about the thumbnail. For details about the ScrollerItemModel class please refer to the section called Class ScrollerItemModel. |
showLabels | Boolean yes |
Specifies whether the labels associated to the items will be displayed or not. For horizontal thumbnail lists, the labels will be displayed below the thumbnails. For vertical thumbnail lists, the labels will be displayed next to the thumbnails, on their right side. The default value is false. |
source | XML/String yes |
The xml data containing the list of images and their information. You can also set this property from the JCThumbViewer Panel, by pasting the xml data into the source text field. You can also set up the component using external XML files by specifying the URL of the source XML file. |
transitionDuration | Number yes |
The amount of time (measured in seconds) that the transition effect will use to complete. The default duration is 0.5. |
tweenType | String yes |
The type if tween used when sliding the list if thumbnails. Possible values are Back, Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, Sine and Strong. The default value is Strong. |
useSlideShowNavigation | Boolean yes |
Specifies whether to display the slide show controls or not. The slide show controls are play and pause buttons used to start or pause the slide show from within the component. The default value is false. |
Property | Type JCThumbViewer Panel |
Description |
_targetInstanceName | String yes |
The instance name of the target display object that will load the large images, video or other content associated to the items. That display object will act as a loader. |
alignMode | String yes |
The type of horizontal and vertical alignment used for the content. Possible values are topLeft, topMiddle, topRight, centerLeft, centerMiddle, centerRight, bottomLeft, bottomMiddle, bottomRight. The default value is topLeft. |
applyEffectOn | String yes |
Specifies on which items the transition effect should be applied. Possible values:
Depending on the type of transition, this property has the effect of making the component use more or less memory and CPU time. For the transition effects of roll and fade we recommend using the onVisibleItems value. For the rest of the transition effects, you should use the onAllItems value. This way you can make sure that the component always uses as less memory as possible during the transitions. The default value is onAllItems. |
autoPlay | Boolean yes |
Specifies whether the component will automatically play a slide show by consecutively selecting the items. Once the last item from the page has been selected and the slide show delay has passed, the component will load the next thumbnails page. If _targetInstanceName is set, the thumbnail dock will automatically set the target display object's source property to load the content associated to the selected item. The default value is false. |
autoPlayDelay | Number yes |
The time interval measured in seconds when the slide show will change the selected item. The thumbnail page will also be changed, after the last displayed item is selected. The default value is 5 seconds. |
config | XML/String no |
Sets the configuration xml for the component. In this case the component will be set up using the values in the xml data and will disregard any previous settings made from the panel or by using code. You can also set up the component using external configuration XML files. In this case you need to specify the URL to that configuration XML file. |
currentPage | int yes |
The 0 based index (the first page is 0, the second page is 1 and so on) of the page currently displayed by the component. You can also change the page by setting a new value to this property. The default value is 0. |
direction | String yes |
The way the items will be displayed in the dock. Possible values are horizontal and vertical. The default value is horizontal. |
easeType | String yes |
The type of easing used by the animations that change the thumbnails page of the component. Possible values are easeIn, easeOut, easeInOut and easeNone.
The default value is easeOut. |
horizontalMargins | Number yes |
The spacing between the left margin of the component (including the navigation button) and the left margin of the list of items (the left margin of the first item) and the spacing between the right margin of the component (including the navigation button) and the right margin of the list of items (the right margin of the last item if direction is set to "horizontal"). The right side spacing is displayed when the list of items scrolls to the end. If showLabels is set to true and direction is set to "vertical" the right margin is between the right margin of the items including the labels (if there are any) and the right margin of the component. In this case the right margin is displayed only if the width of the component is large enough to include the width of the items (including the labels, if there are any) and the two horizontal margins. Note: For a value of 0, the items are aligned at the left margin of the component and any visual effects added to the exterior of the items (like a glow filter) will not be displayed on the left margin, unless the horizontal margins are increased. The default value is 5. |
itemHeight | Number yes |
The height of the thumbnails measured in pixels. Note: For best results make sure the itemHeight matches the actual thumbnail image height in pixels and use the "exactFit" scale mode. The default value is 100. |
items | Array no |
[read-only] The list of objects representing the references to the thumbnails. Each object is of type DockItemModel. For details about the DockItemModel class please refer to the section called Class DockItemModel. |
itemSpace | Number yes |
The size of the space between the thumbnails. The default value is 5. |
itemWidth | Number yes |
The width of the items measured in pixels. Note: For best results make sure the itemWidth matches the actual thumbnail image width in pixels and use the "exactFit" scale mode. The default value is 100. |
length | int no |
[read-only] The number of items in the list. |
scaleMode | String yes |
The type of scaling applied on the content of the items (thumbnails). Possible values:
Note: Some filters will not work correctly with the scaleCrop and scale settings unless their refresh property is set to false (unchecked). Note: For best results make sure the itemWidth and itemHeight match the actual thumbnail image width and height in pixels and use the "exactFit" scale mode. The default value is exactFit. |
selectedIndex | int yes |
Set or get the index of the selected item in the list. The index is 0-based, meaning that the index of the first item is 0, the index of the second item is 1 and the index of the last item is length - 1. The default value is 0. |
selectedItem | DockItemModel no |
[read-only] A reference to the currently selected item. The reference is of type DockItemModel and contains details about the thumbnail. For details about the DockItemModel class please refer to the section called Class DockItemModel. |
showLabels | Boolean yes |
Specifies whether the labels associated to the items will be displayed or not. For horizontal thumbnail lists, the labels will be displayed below the thumbnails. For vertical thumbnail lists, the labels will be displayed next to the thumbnails, on their right side. The default value is false. |
source | XML/String yes |
The xml data containing the list of images and their information. You can also set this property from the JCThumbViewer Panel, by pasting the xml data into the source text field. You can also set up the component using external XML files by specifying the URL of the source XML file. |
totalPages | int no |
[read-only] The total number of thumbnail pages. The last page may contain less items than the other pages. The number of pages depends on the total number of items (please see the length property) and the number of items displayed in one page. This number of items per page is calculated according to the space the items have to be displayed. |
transitionDuration | Number yes |
The amount of time (measured in seconds) that the transition effect will use to complete. The default duration is 0.5. |
transitionEffect | String yes |
The transition effect used by the component to change the thumbnail pages. The transition effects are applied on each item separately. Possible values:
The transition effect depends on the onTransitionStartEvent parameter: if it is set to onItemTransitionEnd, each transition effect will start after the previous transition effect has finished; if it is set to onPageTransitionEnd, the new thumbs will transition in, after the previous page of thumbs has transitioned out. The default value is roll. |
transitionEffectItemDelay | Number yes |
The delay (measured in seconds) between the transition effects for each item. This delay is applied from the moment one item starts to transition out until the next item in the page starts to transition out. The default value is 0.1. |
transitionStartEvent | String yes |
Specifies the moment when the next page of items starts to transition into the view. Possible values:
The default value is onItemTransitionEnd. |
tweenType | String yes |
The type if tween used when sliding the list if thumbnails. Possible values are Back, Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, Sine and Strong. The default value is Strong. |
useSlideShowNavigation | Boolean yes |
Specifies whether to display the slide show controls or not. The slide show controls are play and pause buttons used to start or pause the slide show from within the component. The default value is false. |
verticalMargins | Number yes |
The space left between the top margin of the component (including the navigation button) and the top margin of the items. The bottom spacing is displayed only if the height of the thumbnail dock is large enough to include the items with their largest height (including the labels, if there are any) and the two vertical margins. Note: For a value of 0, the items are aligned right at the top of the component and any visual effects added to the exterior of the items (like a glow filter) will not be displayed on the top margin, unless the vertical margins are increased. The default value is 5. |
Overview | Properties | Methods | Events | XML | ActionScript 3.0 usage | User Manual