(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: | ||
− | < | + | <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> | ||
− | </ | + | </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 ==== | ||
− | < | + | <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'] + '"' ) ; | ||
} | } | ||
− | </ | + | </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 | + | 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 | + | 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 ==== | ||
− | < | + | <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> | ||
− | </ | + | </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).