View source

== Overview ==
This widget creates a thumbnail and preview image selection interface.  When the image selector is defined the spec control is replaced with a scrolling thumbnail preview of all images and a larger preview when an image is selected.  This is designed to provide an enhanced user input for image choices you make available in your Pageflex project.  Events are exposed that allow you to write code against the widget.  Custom parameters are available to alter the styling of the control. 
== Instructions ==
<div> HTML tag must be created that will contain the spec control token. Within the Advanced Scripting tab you must attach the widget to the spec control.  In the attachment you may specify optional parameters that define the rendering of the control.

== Advanced Scripting ==
<div style="background-color: lightgray; padding:5px">
<source lang="javascript">
<div>[[Image]]</div>
spec['Image'].imageSelector({
	width: 500, 
	height: 185, 
	thumbnailsize: 50, 
	bgcolor: "#fff", 
	bordercolor: "#000", 
	highlightcolor: "#ff0", 
	rollovertext: "Click this to insert image", 
	images: ['/Images/Demo/08-1.gif', '/Images/Demo/08.gif',]
});

</source>
</div>

== Options ==
<ul><li>'''width''': Numeric value for the width of the entire widget</li>
<li>'''height''': Numeric value for the height of the entire widget.</li>
<li>'''thumbnailSize''': Numeric value, in pixels, of the width and height of the thumbnails.</li>
<li>'''bordercolor''': The HTML color value for the border.</li>
<li>'''highlightColor''': The HTML color value for the border when the mouse hovers the thumbnail.</li>
<li>'''bgcolor''': The HTML color for the background.</li>
<li>'''rollovertext''': The tooltip string when the mouse hovers the thumbnail.</li>
<li>'''effect''': Define animation to perform on thumbnail click. Options include: slideDown, slideUp, fadeIn, show.</li>
<li>'''debug''': True or false.  When true the control holding the value is displayed.</li></ul>

== Events ==
<ul><li>'''onThumbnailClick()''':  Triggered by the mouse click on a thumbnail image.</li>
<li>'''onThumbnailHover()''': Triggered by the mouseover on a thumbnail image.</li>
<li>'''onChange()''': Triggered after the value of the imageSelector has changed.</li></ul>

== Properties ==
<ul><li>'''value()''':  Sets or gets the current value on the control.</li>
<li>'''image()''': Sets or gets the current url of the image selected.</li></ul>

== Methods ==
'''reset()''':  Resets the control value to null and removes the image preview.

== Events, Properties and Methods Examples ==
<div style="background-color: lightgray; padding:5px">
<source lang="javascript">
spec['Image'].imageSelector.reset();
spec['Image'].imageSelector.value('/images/home.jpg');
spec['Image'].imageSelector.onThumbnailHover = function() {
		alert(spec['Image'].imageSelector.value());
}
</source>
</div>