The Web is a great place to display your photos, and they look even better with good presentation. This month I've designed a photo gallery system which combines an arty look, Netscape/Microsoft DHTML compatibility and a handy way to avoid creating hordes of similar HTML documents - just right for all those digital pics of the summer holidays! Paul Stephens
gallery system has two parts. First, you see a 'wall' of small images,
viewable in their own right. Clicking on an image opens up a separate
browser window, which shows a full-size version of the picture.
I decided to use Dynamic HTML's absolute positioning for the first page, so that I could 'hang' the pictures exactly where I wanted them on the wall. Only Navigator 4.0 and IE 4.0 (or later) support DHTML, so in order to make the page as accessible as possible it seemed best to make sure the positioning worked in both browsers. Luckily this wasn't too hard to do, although it came near the limit of what can be easily achieved in cross-browser DHTML.
The large-image viewer page posed another challenge - how to avoid having to create a separate host document for each full-size image I wanted to display. The answer was inter-page parameter passing, a variation on submitting HTML forms data between pages (a process we looked at in issue 146). My gallery page passes the name of the image file, plus its caption text, to the viewer page, which then uses the document.write() method to generate an <IMG> tag and page content based on the parameter data. This allows a single viewer document to show any image and its caption.
If you don't have the SuperCDs from previous
issues that covered topics such as absolute positioning and parameter
passing, you can find the material in the 'Paul's
Pages' menu here at www.paulspages.co.uk.
Back to Paul's PC Plus Pages menu