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.

(New page: __NOTOC__ SelectThumbnailFunction is the name of a special javascript function that may be called when file is selected inside of CKFinder (very similar to the [[CKFinder/SelectFunction|S...)
 
 
(3 intermediate revisions by one other user not shown)
Line 7: Line 7:
 
Suppose we have the following code to launch CKFinder:
 
Suppose we have the following code to launch CKFinder:
  
<pre>
+
<source>
 
<!-- include the CKFinder integration file -->
 
<!-- include the CKFinder integration file -->
 
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
 
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
Line 17: Line 17:
 
finder.Create() ;
 
finder.Create() ;
 
</script>
 
</script>
</pre>
+
</source>
  
 
In the code above, we have told CKFinder, that when thumbnail is selected by the user, the "ShowFileInfo" function should be called.
 
In the code above, we have told CKFinder, that when thumbnail is selected by the user, the "ShowFileInfo" function should be called.
Line 31: Line 31:
 
==== Example 1 ====
 
==== Example 1 ====
  
<pre>
+
<source>
 
function ShowFileInfo( fileUrl, data )
 
function ShowFileInfo( fileUrl, data )
 
{
 
{
Line 46: Line 46:
 
alert( 'The data passed to the function is: "' + data['selectThumbnailFunctionData'] + '"' ) ;
 
alert( 'The data passed to the function is: "' + data['selectThumbnailFunctionData'] + '"' ) ;
 
}
 
}
</pre>
+
</source>
 
(see js/standalone.html example in the _samples folder for a full example).
 
(see js/standalone.html example in the _samples folder for a full example).
  
Line 52: Line 52:
  
 
When [[CKFinder/SelectFunction|SelectFunction]] is set and the SelectThumbnailFunction is not set, the SelectFunction will be used by default to select a thumbnail. <br/>
 
When [[CKFinder/SelectFunction|SelectFunction]] is set and the SelectThumbnailFunction is not set, the SelectFunction will be used by default to select a thumbnail. <br/>
To instead disable the thumbnail selection, set the '''DisableThumbnailSelection''' property to false.
+
To instead disable the thumbnail selection, set the '''DisableThumbnailSelection''' property to true.
  
 
=== SelectThumbnailFunctionData ===
 
=== 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.
+
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 ====
 
==== Example 2 ====
  
<pre>
+
<source lang="html4strict">
 
<!-- include the CKFinder integration file -->
 
<!-- include the CKFinder integration file -->
 
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
 
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
Line 90: Line 90:
 
<input type="button" value="Browse Server" onclick="BrowseServer( 'xImagePath' );" />
 
<input type="button" value="Browse Server" onclick="BrowseServer( 'xImagePath' );" />
 
</p>
 
</p>
</pre>
+
</source>
 
(see js/popups.html example in the _samples folder for a full example).
 
(see js/popups.html example in the _samples folder for a full example).

Latest revision as of 07:46, 28 May 2010


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.