SelectThumbnailFunction

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.


SelectThumbnailFunction is the name of a special javascript function that may be called when file is selected inside of CKFinder (very similar to the SelectFunction). It can be used for example when CKFinder is working as a standalone file manager to insert a link to a thumbnail or insert a thumbnail linking to a full size image.


Suppose we have the following code to launch CKFinder:

<!-- include the CKFinder integration file -->
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
...
<script type="text/javascript">
var finder = new CKFinder() ;
finder.BasePath = '/ckfinder/' ;
finder.SelectThumbnailFunction = ShowFileInfo ;
finder.Create() ;
</script>

In the code above, we have told CKFinder, that when thumbnail is selected by the user, the "ShowFileInfo" function should be called. The ShowFileInfo is a name of our custom function, which accepts two arguments passed by CKFinder:

  • fileUrl - the url of selected thumbnail,
  • data - a javascript object with additional information:
    • data["thumbnailUrl"] - same as the first argument; all other properties below refer to the full size image
    • data["fileUrl"] - the url to a full size image,
    • data["fileSize"] - size of a full size image in kilobytes, if the size of a file is smaller than 512b, it is set to 1(KB),
    • data["fileDate"] - returns the time the file was last modified (in the format: YYYYMMDDhhmm),
    • data["selectThumbnailFunctionData"] - the value which was assigned to the SelectThumbnailFunctionData property.

Example 1

function ShowFileInfo( fileUrl, data )
{
	alert( 'The selected thumbnail URL is "' + fileUrl + '"' ) ;

	var formatDate = function( date ) {
		return date.substr(0,4) + "-" + date.substr(4,2)  + "-" + date.substr(6,2) + " " + date.substr(8,2) + ":" + date.substr(10,2) ;
	}
	
	alert( 'The selected thumbnail URL is: "' + data['thumbnailUrl'] + '"' ) ;
	alert( 'The URL of full size image is: "' + data['fileUrl'] + '"' ) ;
	alert( 'The size of selected file is: "' + data['fileSize'] + 'KB"' ) ;
	alert( 'The selected file was last modifed on: "' + formatDate( data['fileDate'] ) + '"' ) ;
	alert( 'The data passed to the function is: "' + data['selectThumbnailFunctionData'] + '"' ) ;
}

(see js/standalone.html example in the _samples folder for a full example).

DisableThumbnailSelection

When SelectFunction is set and the SelectThumbnailFunction is not set, the SelectFunction will be used by default to select a thumbnail.
To instead disable the thumbnail selection, set the DisableThumbnailSelection property to true.

SelectThumbnailFunctionData

As explained above, SelectThumbnailFunctionData is a special data (string) that can be passed to the SelectionThumbnailFunction. Usually it would be the ID of a HTML field that should be updated when file is selected - this way we are able to update multiple fields using the same select function.

Example 2

<!-- include the CKFinder integration file -->
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
...
<script type="text/javascript">
function BrowseServer( inputId )
{
	var finder = new CKFinder() ;
	finder.BasePath = '/ckfinder/' ;
	finder.SelectThumbnailFunction = SetFileField ;
	finder.SelectThumbnailFunctionData = inputId ;
	finder.Popup() ;
}

function SetFileField( fileUrl, data )
{
	document.getElementById( data["selectThumbnailFunctionData"] ).value = fileUrl ;
}
</script>
...
<p>
	<strong>Selected File URL</strong><br/>
	<input id="xFilePath" name="FilePath" type="text" size="60" />
	<input type="button" value="Browse Server" onclick="BrowseServer( 'xFilePath' );" />
</p>
<p>
	<strong>Selected Image URL</strong><br/>
	<input id="xImagePath" name="ImagePath" type="text" size="60" />
	<input type="button" value="Browse Server" onclick="BrowseServer( 'xImagePath' );" />
</p>

(see js/popups.html example in the _samples folder for a full example).

This page was last edited on 28 May 2010, at 07:46.