Displaying documents in a View in a ‘Thumbnail Gallery’ format

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:

css gallery example

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.

Advertisements

One thought on “Displaying documents in a View in a ‘Thumbnail Gallery’ format

  1. Steve McDonagh 2008-February-20 / 1:02 am

    Patrick
    Totally off topic.. this is by the way of an apology.. you left a comment on my blog at dominoyesmayne.blogspot,com which i inadvertently rejected by not paying attention to where i clicked in the moderation email i got from Blogger… that will teach me not to do my email while lying on the sofa..

    Thanks for the comment and the kind words, I am glad you found it at least interesting 🙂 It is always nice to get feedback. I only chose Yahoo because i am most familiar with it. We use DOJO at work which is just as good but somehow i always come back to Yahoo.. : ) probably the “path most trodden”

    Anyway thanks for the comment.. and sorry again for accidentally deleting it!

    Steve

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s