!!! Attachment Viewer
After loading a bunch of attachments into a wiki-page, the only way to remember with images were loaded is by clicking them one by one.

Here is a tiny in-page attachment viewer allowing you to get a sneak preview of each image
(.bmp, .png, .gif, .jpg, .jpeg, .tiff) squeezed within a 300x300 pixel box.

It is part of the [BrushedTemplate] v2.2.x. --[DF|DirkFrederickx]
\\2nd version with small improvements in jsp, .js and .css. (such as: no more tables, graceful degradation if screen is to narrow, show width and heigth of image in tooltip) -- Nov 05

[attachmentViewer.jpg]

!! Usage

Typically, you can insert this viewer as a replacement of the attachment list you find at the bottom of the JSPWiki page. (i.e ~PageContent.jsp) In the [BrushedTemplate] it is inserted in a separate Attachment tab. The same viewer is also usable to browse through the different versions of an attachment.

Alternatively, one could just install a web browser add-on that displays images such as a [TIFF Viewer|http://www.cartesianinc.com/Products/View/TIFF/].

!! Implementation

You need to have 3 things : an updated .jsp page, some javascript and some 
css stylesheet definitions for looking good.
The .jsp page contains 2 square boxes of 300 x 300 pixel each: the left box shows the selected image, the right box contains a dropdown listing all attachments and some links to actually download the attachment or show its version history.

The javascript will load the image to your browser, and size it within the 300x300 pixel box.

! The Attachment Viewer jsp
%%(width:720px; overflow:auto;)
{{{
<div id="attachmentViewer">

  <div class="list">
    <h3>List of attachments</h3>
    <form action='#'>
    <select name="attachSelect" id="attachSelect" size="16" 
            onchange="Wiki.showImage(this[this.selectedIndex], '%A4', 300, 300 )" >
    <option value="Attachment Info" selected="selected" >--- No Image Selected ---</option>
    <wiki:AttachmentsIterator id="att">
    <%-- use %A4 as delimiter:  Name, Link-url, Info-url, Size, Version --%>
    <option value="<wiki:PageName />%A4<wiki:LinkTo format='url' />%A4<wiki:PageInfoLink format='url' />%A4<wiki:PageSize /> bytes%A4<wiki:PageVersion />" >
       <wiki:PageName /> (<wiki:PageSize /> bytes , revision-<wiki:PageVersion />)
    </option>
    </wiki:AttachmentsIterator>
    </select>
    </form>
    <small>(Click on an image to see a preview)</small>
    <p>
    <div id="attachLoad">Download attachment</div>
    <div id="attachInfo">Attachment info</div>
    </p>
  </div>  

  <div class="preview">
    <h3>Image preview</h3>
    <div id="attachImg">No Image Selected</div>
  </div>

  <div style="clear:both; height:0px;" > </div>

</div>
}}}
%%

! The Attachment Viewer Javascript 
%%(width:720px; overflow:auto;)
{{{
var Wiki = new Object();
/**
 ** AttachmentViewer stuff
 **/
Wiki.reImageTypes = new RegExp( '(.bmp|.gif|.png|.jpg|.jpeg|.tiff)$', 'i' );
Wiki.showImage = function( attachment, attDELIM, maxWidth, maxHeight )
{
  // contains Name, Link-url, Info-url 
  var attachArr = attachment.value.split( attDELIM );
  var attachImg  = document.getElementById("attachImg");
  var attachInfo = document.getElementById("attachInfo");
  var attachLoad = document.getElementById("attachLoad");

  if( !attachImg || !attachInfo || !attachLoad ) return true;

  if( attachArr.length == 1 ) //no image selected
  {
    attachLoad.innerHTML = "Download Attachment";
    attachInfo.innerHTML = "Attachment Info";
    attachImg.innerHTML  = "No Image Selected"; 
    return;
  }
  attachLoad.innerHTML  = "<a href='"+ attachArr[1]   
                        + "' title='Download Attachment " + attachment.text 
                        + "' >Download Attachment</a>";
  attachInfo.innerHTML  = "<a href='" + attachArr[2] 
                        + "' title='Attachment Info for " + attachment.text 
                        + "' >Attachment Info</a>"

  //not clean: should actually be read from the attachImg size 
  //- but dont know yet how cross-browser
  this.maxWidth = maxWidth;
  this.maxHeight = maxHeight;

  if( !this.reImageTypes.test( attachArr[0] ) ) 
  { 
    attachImg.innerHTML  = "No Image Selected"; 
    return;
  }  

  this.pic = new Image();
  this.pic.src = attachArr[1];
  if( this.pic.complete ) return Wiki.showLoadedImage() ; 

  this.countdown = 30;
  setTimeout( "Wiki.showLoadedImage()" , 200 ); 
  attachImg.innerHTML= "Loading image";
}

Wiki.showLoadedImage = function ()
{
  var attachImg  = document.getElementById("attachImg");

  if( this.pic.complete ) 
  { 
    var w = parseInt(this.pic.width);  var wo = w;
    var h = parseInt(this.pic.height); var ho = h;

    if( w > this.maxWidth  ) { h *= this.maxWidth/w;  w = this.maxWidth; }
    if( h > this.maxHeight ) { w *= this.maxHeight/h; h = this.maxHeight; }
    attachImg.innerHTML = "<img src='" + this.pic.src 
                        + "' width='" + parseInt(w) + "' height='" + parseInt(h)
                        + "' title='Width:" + wo + "px  Height:" + ho  + "px"
                        + "' style='margin-top:"+ parseInt((this.maxHeight-h)/2) 
                        + "px;' ></img>";
    this.countdown = 0; 
    this.pic = null;
    return;  
  }

  if( this.countdown <= 0 ) 
  {  
    attachImg.innerHTML = "Loading image expired<br />Try loading the image manually";
    return;
  } 

  this.countdown--;
  setTimeout( "Wiki.showLoadedImage()" , 200) ; 
  attachImg.innerHTML = "Loading image " + this.countdown
}
}}}
%%

! The Attachment Viewer CSS - stylesheet stuff
{{{
/* +++ 420 Attachment Quick Viewer +++ */
/* nice degrade if window is too small */
#attachmentViewer .list    { float: left; margin: 0 2em 0 0; }
#attachmentViewer .preview { float: left; }

#attachImg    { height: 300px; width: 300px; line-height: 300px; text-align:center;
                border: 1px solid gray; }
#attachSelect { height: 302px; width: 300px; font-size: 0.83em;  }
}}}

----
Back to [BrushedTemplate]