How do you link to Disk Previews from thumbnails?

You may well wish to call a bigger image to screen than the thumbnail PortWeb can extract from a Catalogue, the latter only being 112x112 or 256x256 pixels. One easy candidate is to use the Disk Preview files that Portfolio can create for you. However, the snag is that the Previews have filenames like p0000000065.jpg that give no immediate cue as to the associated original image and you must script this association yourself.

To solve this problem I have created a JavaScript that when called will pop a new window displaying the appropriate disk preview. To allow you to try out the script I have created a template and test files which may be downloaded. They enable you to run and test a script which returns the path to a preview when supplied with the record's RID. The 'readme' file also has a fully commented version of the script below to aid those less familiar with JavaScript.

The script has the following compatibility requirements:

• browser must support JavaScript v1.2 (effectively v4.x or later versions of NN or IE).
• browser has JavaScript enabled.
• all records used must have Portfolio Disk Previews already created.
• all Previews must be in a single folder.
• web server set-up must allow the browser to access this folder.

Remember, the syntax of a Portfolio-created Disk Preview is - p + padding zeroes + RID + .jpg - in which the zeroes + RID = 10 characters. Thus RID 1234 will give preview p00001234.jpg

Here is the script without any explanatory comment:
<script language="JavaScript" type="text/javascript">
<!--
// script created by Mark Anderson (mark@yeardley.demon.co.uk)

var persistPathToPrev = 'subfolder/'

function getPreview(myRID)
{
myRID = myRID.toString(10);
var winName = 'RID';
var myZeros = '0000000000';
var lengthRID = myRID.length;
myZeros = myZeros.slice(lengthRID);
myRID = 'p' + myZeros + myRID + '.jpg';
prevPath = persistPathToPrev + myRID;
myRID = '';
var popWindow;
popWindow = window.open(prevPath,winName,'toolbar=0,location=0,directories=0,status=0,menubar=0');
popWindow.focus();
}
-->
</script>

Sample usage in a PortWeb template:

<a href="javascript:getPreview(%RID%)">
<img src="%thumbnail%" border=0>
</a>

Don't forget there is a commented version and test files you can download.

Question: How do you link to Disk Previews from thumbnails? [FAQ00200.htm]
Last Update:- 31 May 2006

This FAQ is created and maintained using

Friday - The Automatic FAQ Maker