Image Selector

jdubs edited this page Oct 23, 2016 · 1 revision

Table of Contents

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

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.
  • When search is enabled it must be configured using the image array. The array must now be an array of JSON objects rather than an array of strings (image src). The search box will appear above the thumbnail list. The information typed into the search field will use the tag value as the source of the search. The thumbnails for ny matching items will be displayed. Simply clearing the search box will reset the thumbnail list.

Advanced Scripting

<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',]
});

Example with search

<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: [ 
		{ tag: 'Dallas Home', path: 'Images/Demo/dalhome.jpg'},
		{ tag: 'Dallas Road', path: 'Images/Demo/dalroad.jpg'},		
		{ tag: 'Dallas Throwback', path: 'Images/Demo/dalthrow.jpg'},
		{ tag: 'Green Bay Home', path: 'Images/Demo/gbhome.jpg'},
		{ tag: 'Green Bay Road', path: 'Images/Demo/gbroad.jpg'},
		{ tag: 'Green Bay Throwback', path: 'Images/Demo/gbthrow.jpg'}
	]
});

Options

  • width: Numeric value for the width of the entire widget
  • height: Numeric value for the height of the entire widget.
  • thumbnailSize: Numeric value, in pixels, of the width and height of the thumbnails.
  • bordercolor: The HTML color value for the border.
  • highlightColor: The HTML color value for the border when the mouse hovers the thumbnail.
  • bgcolor: The HTML color for the background.
  • rollovertext: The tooltip string when the mouse hovers the thumbnail.
  • effect: Define animation to perform on thumbnail click. Options include: slideDown, slideUp, fadeIn, show.
  • debug: True or false. When true the control holding the value is displayed.
  • search: True or false. When true the images object must be a JSON object with "tag" and "path" defined for each image.

Events

  • onThumbnailClick(): Triggered by the mouse click on a thumbnail image.
  • onThumbnailHover(): Triggered by the mouseover on a thumbnail image.
  • onChange(): Triggered after the value of the imageSelector has changed.

Properties

  • value(): Sets or gets the current value on the control.
  • image(): Sets or gets the current url of the image selected.

Methods

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

Events, Properties and Methods Examples

spec['Image'].imageSelector.reset();
spec['Image'].imageSelector.value('/images/home.jpg');
spec['Image'].imageSelector.onThumbnailHover = function() {
		alert(spec['Image'].imageSelector.value());
}

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.