Add a simple image preview in image browser

I've added a simple image preview in the Image browser. It's very simple to change:

Open FCKeditor\editor\filemanager\browser\default\frmresourceslist.html

replace the complete function: oListManager.AddFile = function( fileName, fileUrl, fileSize )

with:

oListManager.AddFile = function( fileName, fileUrl, fileSize )
{
// Create the new row.
var oRow = this.Table.insertRow(-1) ;
// NEW: Points to a CSS class defined in browser.css
// Create a new class in browser.css:
//.trfiles{
// font-size: 11px;
// font-family: 'Microsoft Sans Serif' , Arial, Helvetica, Verdana;
// background-color: #A3C1DE;
// }
oRow.className = "trfiles";

// Build the link to view the folder.
// NEW: Two kinds of rows. We need only one pointing to the image itself, otherwise we see two images in the browser
var sLink = '<div style="height:100%; padding:0px 7px 7px 7px;"><a href="#" onclick="OpenFile(\'' + fileUrl + '\');return false;">' ;
var sLink2 = '<div style="height:100%; padding:0px 7px 7px 7px;"><a style="margin-left:5px;" href="#" onclick="OpenFile(\'' + fileUrl + '\');return false;"><img src=' + fileUrl + ' width="150" align="left" border="0">' ;

// Get the file icon.
var sIcon = oIcons.GetIcon( fileName ) ;

// Add the file icon cell.
var oCell = oRow.insertCell(-1) ;

// NEW: four styles to align all the cells and add a border at the bottom
oCell.style.paddingLeft = "5px";
oCell.style.verticalAlign = "top";
oCell.style.paddingTop = "15px";
oCell.style.borderBottom = "2px solid white";


oCell.width = 16 ;
oCell.innerHTML = sLink + '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"></a>' ;

// Add the file name cell.
oCell = oRow.insertCell(-1) ;
// NEW border bottom
oCell.style.borderBottom = "2px solid white";
// CHANGED: this one points to sLink2 and shows the image
oCell.innerHTML = '&nbsp;' + sLink2 + fileName + '</a>' ;

// Add the file size cell.
oCell = oRow.insertCell(-1) ;

// NEW: four styles to align all the cells and add a border at the bottom
oCell.style.paddingRight = "5px";
oCell.style.verticalAlign = "top";
oCell.style.paddingTop = "15px";
oCell.style.borderBottom = "2px solid white";

oCell.noWrap = true ;
oCell.align = 'right' ;
oCell.innerHTML = '&nbsp;' + fileSize + ' KB</div>' ;
}

Don't forget to set the cellspacing in the table at the bottom in frmresourceslist.html to zero.

There is no fancy thumbnailing available so if you are working with a large amount of images it can take a while before they are loaded.