v2.3B: In editor/filemanager/browser/default/frmresourceslist.html add the following on line 79 (sourceforge will probably mess up my post, but try to figure it out):
// Add the thumbnail cell. oCell = oRow.insertCell(-1) ; if (sIcon == 'gif' || sIcon == 'jpg') { oCell.innerHTML = ' ' + sLink + '<img src="' + fileUrl + '" height="40" border="0"></a>' ; } else { // No gif or jpg, don't show image , show big icon oCell.innerHTML = ' ' + sLink + '<img alt="" src="images/icons/32/' + sIcon + '.gif" width="32" height="32" border="0"></a>' ; }
Anyone know how to get the Config object from this function? In order to view thumbs, I need to get Config ['BaseHref'] because my images are located from the root of my app.
I was all set to try trekmp's code, but I can't find where to insert it in version 2.3. It looks like it's meant for 2.2 (because I can find the function to be modified on line 79 there). Will it really work in 2.3?
Right got version 2.3 to work with an extra feature to show the full size image if you want it:
First off paste the following code at the top, just within the <script type="text/javascript">
###START PASTE### function h2oDisplayNormal(h2oObj,h2oID) { var h2oImgStart='<img src="'; var h2oImgEnd='" border="0" />'; var h2oMyOutput=document.getElementById("h2o_"+h2oID); h2oMyOutput.style.display="block"; h2oMyOutput.innerHTML=h2oImgStart+h2oObj+h2oImgEnd; } function h2oDisplayNone(h2oObj) { var h2oMyOutput=document.getElementById("h2o_"+h2oObj); h2oMyOutput.style.display="none"; h2oMyOutput.innerHTML=""; }
Then paste the following: /*================================================== Modification to display thumb nails Modifed date: 20/07/2006 Modified by: http://www.h2odevelopments.co.uk ==================================================*/ var imgH="52"; var imgW="52"; var h2oOutput=""; h2oOutput='<tr><td width="16">'+sLink+'<img alt="'+sIcon+'" src="images/icons/'+sIcon+'.gif" width="16" height="16" border="0"/></a></td>'; h2oOutput+='<td nowarp colspan="2"> '+sLink; if(sIcon=="gif" || sIcon=="jpg" || sIcon=="png") {
//=== Start of remove if you don't want to display full image on rollover var h2oFunc='h2oDisplayNormal(this.src,''+fileName+'')'; h2oOutput+=' onmouseover="'+h2oFunc+'"'; h2oOutput+=' onmouseout="h2oDisplayNone(''+fileName+'')"'; //=== End of remove if you don't want to display full image on rollover
RE: Image preview
Amazing!
RE: Image preview
In editor/filemanager/browser/default/frmresourceslist.html
add the following on line 79 (sourceforge will probably mess up my post, but try to figure it out):
// Add the thumbnail cell.
oCell = oRow.insertCell(-1) ;
if (sIcon == 'gif' || sIcon == 'jpg') {
oCell.innerHTML = ' ' + sLink + '<img src="' + fileUrl + '" height="40" border="0"></a>' ;
} else { // No gif or jpg, don't show image , show big icon
oCell.innerHTML = ' ' + sLink + '<img alt="" src="images/icons/32/' + sIcon + '.gif" width="32" height="32" border="0"></a>' ;
}
RE: Image preview
No oRow is defined there.
RE: Image preview
RE: Image preview
if (sIcon == 'gif' || sIcon == 'jpg') {
return '<tr>' +
'<td width="16">' +
'<img src="' + fileUrl + '" width="50" border="0">' +
'</td><td> ' +
'<td width="16">' +
sLink +
'<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"></a>' +
'</td><td> ' +
sLink +
fileName +
'</a>' +
'</td><td align="right" nowrap> ' +
fileSize +
' KB' +
'</td></tr>' ;
} else { // No gif or jpg, don't show image , show space
return '<tr>' +
'<td width="16">' +
' ' +
'</td><td> ' +
'<td width="16">' +
sLink +
'<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"></a>' +
'</td><td> ' +
sLink +
fileName +
'</a>' +
'</td><td align="right" nowrap> ' +
fileSize +
' KB' +
'</td></tr>' ;
}
RE: Image preview
RE: Image preview
I've done a thumbnail piece of code that works in 2.3
Edit the file: editor/filemanager/browser/default/frmresourceslist.html
Find this line its around 79:
oCell.innerHTML = ' ' + sLink + fileName + '</a>';
And replace it with
/*==================================================
Modification to display thumb nails
Modifed date: 20/07/2006
Modified by: http://www.h2odevelopments.co.uk
==================================================*/
//oCell.innerHTML = ' ' + sLink + fileName + '</a>'; //orginal line
var imgH="52";
var imgW="52";
if(sIcon=="gif" || sIcon=="jpg" || sIcon=="png") {
oCell.innerHTML = ' ' + sLink + '<img src="'+fileUrl+'" alt="'+fileName+'" height="'+imgH+'" width="'+imgW+'" border="0"/></a> ('+fileName+')';
} else {
oCell.innerHTML = ' ' + sLink + fileName + '</a>';
}
/*==================================================
End of modifications
==================================================*/
RE: Image preview -- wrong version?
RE: Image preview
RE: Image preview
xml request error: Not Found (404)
I've got exactly the same config settings as the 2.2 version, any suggestions
RE: Image preview
oListManager.GetFileRowHtml = function( fileName, fileUrl, fileSize )
{
// Build the link to view the folder.
var sLink = '<a href="#" onclick="OpenFile(\'' + fileUrl.replace( /'/g, '\\\'') + '\');return false;">' ;
// Get the file icon.
var sIcon = oIcons.GetIcon( fileName ) ;
var sThumb = ' ' + sLink + '<img border="0" width="32" height="32" src="';
if (sIcon == 'gif' || sIcon == 'jpg') {
sThumb += fileUrl + '"></a>';
}
else {
sThumb += 'images/icons/32/' + sIcon + '.gif"></a>';
}
return '<tr>' +
'<td width="16">' +
// Add the thumbnail cell.
sThumb +
//'<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"></a>' +
'</td><td> ' +
sLink +
fileName +
'</a>' +
'</td><td align="right" nowrap> ' +
fileSize +
' KB' +
'</td></tr>' ;
// Add the thumbnail cell.
oCell = oRow.insertCell(-1) ;
if (sIcon == 'gif' || sIcon == 'jpg') {
oCell.innerHTML = ' ' + sLink + '<img src="' + fileUrl + '" height="40" border="0"></a>' ;
} else { // No gif or jpg, don't show image , show big icon
oCell.innerHTML = ' ' + sLink + '<img alt="" src="images/icons/32/' + sIcon + '.gif" width="32" height="32" border="0"></a>' ;
}
}
RE: Image preview
// Add the thumbnail cell.
oCell = oRow.insertCell(-1) ;
if (sIcon == 'gif' || sIcon == 'jpg') {
oCell.innerHTML = ' ' + sLink + '<img src="' + fileUrl + '" height="40" border="0"></a>' ;
} else { // No gif or jpg, don't show image , show big icon
oCell.innerHTML = ' ' + sLink + '<img alt="" src="images/icons/32/' + sIcon + '.gif" width="32" height="32" border="0"></a>' ;
}
RE: Image preview
Right got version 2.3 to work with an extra feature to show the full size image if you want it:
First off paste the following code at the top, just within the
<script type="text/javascript">
###START PASTE###
function h2oDisplayNormal(h2oObj,h2oID) {
var h2oImgStart='<img src="';
var h2oImgEnd='" border="0" />';
var h2oMyOutput=document.getElementById("h2o_"+h2oID);
h2oMyOutput.style.display="block";
h2oMyOutput.innerHTML=h2oImgStart+h2oObj+h2oImgEnd;
}
function h2oDisplayNone(h2oObj) {
var h2oMyOutput=document.getElementById("h2o_"+h2oObj);
h2oMyOutput.style.display="none";
h2oMyOutput.innerHTML="";
}
Then locate this line:
oListManager.GetFileRowHtml = function( fileName, fileUrl, fileSize )
Comment out:
/*return '<tr>' +
'<td width="16">' +
sLink +
'<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"></a>' +
'</td><td> ' +
sLink +
fileName +
'</a>' +
'</td><td align="right" nowrap> ' +
fileSize +
' KB' +
'</td></tr>' ;*/
Then paste the following:
/*==================================================
Modification to display thumb nails
Modifed date: 20/07/2006
Modified by: http://www.h2odevelopments.co.uk
==================================================*/
var imgH="52";
var imgW="52";
var h2oOutput="";
h2oOutput='<tr><td width="16">'+sLink+'<img alt="'+sIcon+'" src="images/icons/'+sIcon+'.gif" width="16" height="16" border="0"/></a></td>';
h2oOutput+='<td nowarp colspan="2"> '+sLink;
if(sIcon=="gif" || sIcon=="jpg" || sIcon=="png") {
h2oOutput+=' ' + sLink + '<img src="'+fileUrl+'" alt="'+fileName+'" height="'+imgH+'" width="'+imgW+'" border="0"';
//=== Start of remove if you don't want to display full image on rollover
var h2oFunc='h2oDisplayNormal(this.src,''+fileName+'')';
h2oOutput+=' onmouseover="'+h2oFunc+'"';
h2oOutput+=' onmouseout="h2oDisplayNone(''+fileName+'')"';
//=== End of remove if you don't want to display full image on rollover
h2oOutput+=' /></a> ('+fileName+')';
h2oOutput+='<div id="h2o_'+fileName+'" style="display: none; border: 1px solid #ccc;padding: 2px;"></div>';
} else {
h2oOutput+= ' ' + sLink + fileName + '</a>';
}
h2oOutput+='</td><td align="right" nowrap> ' +fileSize+' KB</td></tr>';
return h2oOutput;
/*==================================================
End of modifications
==================================================*/
This has been tested in IE and Firefox and all seems well