Showing document information in the normal ‘vertical’ way can sometimes be pretty boring. It also requires a lot of space especially when images as part of the information becomes involved.
On the WWW a lot of examples can be found how to create a ‘CSS Image Gallery‘
But you will see when images have different sizes and their caption text underneath will differ the result will be quickly dis-satisfying:
Ofcourse you can set the same height and width on the images. But what for the caption text?
With a little bit of DOM scripting using Prototype you can simply rebuild your screen and show the view in a table format. Add the following code to the JS onLoad event:
//ALL DOCUMENT INFORMATION (ROW) IS DISPLAYED IN A DIV WITH CLASS THUMBNAIL:
varThumbs = $$(‘div.thumbnail’);
varThumbs.each(Element.hide);
//NUMBER OF COLUMNS:
var numberDocs = 3
var varRowCounter = 1
var varTable=”";
if (varThumbs.length > 0) {
varTable+=”<table border=0>”;
varTable+=”<tr>”;
for (i=0; i< varThumbs.length; i++) {
//FYI (5 % 5) => 5 Mod 5 returns 0
if (varRowCounter % numberDocs == 0){
varTable+=”<td valign=\”top\” onmouseover=\”style.backgroundColor=’#F4F4F4′;\” onmouseout=\”style.backgroundColor=’#FFF’;\”>” + varThumbs[i].innerHTML + “</td></tr><tr>”
varRowCounter=1
}
else{
varTable+=”<td valign=\”top\” onmouseover=\”style.backgroundColor=’#F4F4F4′;\” onmouseout=\”style.backgroundColor=’#FFF’;\”>” + varThumbs[i].innerHTML + “</td>”
varRowCounter+=1
}
}
varTable+=”</tr>”;
varTable+=”</table>”;
}
$(‘viewbody’).replace(varTable)
‘viewbody’ is the DIV where the $$ViewBody field is nested.
