Working with Image Thumbnails in AJAX File Browser
Important! The information provided on this page is outdated and provided for pre-release Ajax File Browser users.
How Images Preview are Requested
The Ajax File Browser provides several modes in which it displays image thumbnails.
There is no need in generating thumbnails on server side to display a resized image. The AJAX File Browser and user agent correctly process and resize images of any size on a client side.
However if you would like to minimize bandwidth, your server can generate necessary thumbnail and return it instead of original image. When requesting an image thumbnail the AJAX File Browser adds width and height arguments to query string:
http://webdavserver.com/image.gif?width=42&height=42
The AJAX File Browser displays images of the following size: 42x42px, 85x85px, 232x232px. To programmatically set view mode call SetViewMode passing necessary view mode:
ajaxFileBrowser.SetViewMode(ITHit.WebDAV.Client.AjaxFileBrowser.Render.ViewModes.Large);
The ViewModes enum can have following values: Details, Medium, Large, ExtraLarge. To get the view mode call GetViewMode method.
How to Turn-off Image Preview
To display an icon instead of thumbnail call SetShowImagePreview method and pass false as an argument:
ajaxFileBrowser.SetShowImagePreview(false);
ajaxFileBrowser.Refresh();
To read the this setting use GetShowImagePreview method. To redraw the view call Refresh method.
Setting List of File Extensions for Image Preview
To set the list of file types for which AJAX File Browser will request and generate image previews call SetImageTypes method and pass string containing list of file extensions separated by '|' symbol:
ajaxFileBrowser.SetImageTypes('png|jpg|jpeg|gif');
To read the list of file types use GetImageTypes method. By default AJAX File Browser generates thumbnails for png, jpg, jpeg, gif, bmp and tiff images.
For all files that are not included in the list returned by GetImageTypes, file icons are displayed. The file icons are stored in subfolders of icons\ folder in png format. You can add more icons to this folders or delete unnecessary icons. If no appropriate icon is found the default file icon is displayed.
AJAX File Browser Control Image Preview Demo
Files View Panel Customization
When creating AJAX File Browser you can specify mode in which to display image thumbnails. To set the mode in which files and folders will be displayed set the ViewMode attribute.
For image files, in the thumbnails modes, the Ajax File Browser can display either default file icons or image thumbnails. The default file icons are loaded from the path specified by FileIconsPath. To set the list of file types for which AJAX File Browser will create thumbnails use the ImageTypes attribute. To display default file icons instead of image thumbnails set the ShowImagePreview property to false.
You can also specify if folders should be displayed in Files View panel. Use the ShowFolders attribute for this purpose.
var settings = {
Id: 'AjaxFileBrowserContainer', // ID of the parent control
Url: 'http://webdavserver.com', // WebDAV server Url
Style: 'height: 100%; width: 100%',
FileIconsPath: '/icons/', // file icons path
MsOfficeTemplatesPath: 'http://webdavserver.com/MSOfficeTemplates/',
SelectedFolder: '/Pictures', // folder to be selected
PluginsPath: '/plugins/' // path to Java applet that opens documents
ShowFolders: false, // show/hide folders in Files View panel
ViewMode: ITHit.WebDAV.Client.AjaxFileBrowser.Render.ViewModes.Large,
ShowImagePreview: true, // show thumbnail for images
ImageTypes: 'png|jpg|jpeg|gif', // show thumbnails for this image types
}
A working example of Files View panel customization could be found here.
See also Working with Image Thumbnails in AJAX File Browser
|