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
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.

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#

<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 #

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

Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
jpg
13123.jpg 40.8 kB 1 30-Oct-2006 17:36 74.12.206.52 dan
jpg
attachmentViewer.jpg 39.6 kB 9 27-Mar-2007 20:43 81.165.217.91 Remove spam
« This page (revision-11) was last changed on 02-May-2008 10:06 by JanneJalkanen