CKFinder 1.x/SelectThumbnailFunction - Revision history

Admin: moved CKFinder/SelectThumbnailFunction to CKFinder 1.x/SelectThumbnailFunction

2010-05-28T06:46:33Z

moved CKFinder/SelectThumbnailFunction to CKFinder 1.x/SelectThumbnailFunction

Wiktor at 11:57, 18 January 2010

2010-01-18T11:57:25Z

Wiktor: /* SelectThumbnailFunctionData */

2008-12-16T15:09:40Z

‎SelectThumbnailFunctionData

Wiktor: /* DisableThumbnailSelection */

2008-12-16T15:09:21Z

‎DisableThumbnailSelection

Wiktor: 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...

2008-12-16T15:04:33Z

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...

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|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:

<pre>

<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>
</pre>

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 ====

<pre>
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'] + '"' ) ;
}
</pre>
(see js/standalone.html example in the _samples folder for a full example).

=== DisableThumbnailSelection ===

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.

=== 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 ====

<pre>

<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>
</pre>
(see js/popups.html example in the _samples folder for a full example).

← Older revision	Revision as of 06:46, 28 May 2010
(No difference)

@@ Line 7: / Line 7: @@
 Suppose we have the following code to launch CKFinder:
-<pre>
+<source>
 <!-- include the CKFinder integration file -->
 <script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
@@ Line 17: / Line 17: @@
 finder.Create() ;
 </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.
@@ Line 31: / Line 31: @@
 ==== Example 1 ====
-<pre>
+<source>
 function ShowFileInfo( fileUrl, data )
+{
@@ Line 46: / Line 46: @@
 	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).
@@ Line 60: / Line 60: @@
 ==== Example 2 ====
-<pre>
+<source lang="html4strict">
 <!-- include the CKFinder integration file -->
 <script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
@@ Line 90: / Line 90: @@
 	<input type="button" value="Browse Server" onclick="BrowseServer( 'xImagePath' );" />
 </p>
-</pre>
+</source>
 (see js/popups.html example in the _samples folder for a full example).

@@ Line 56: / Line 56: @@
 === 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 ====