Issue 156 - Photo Gallery 

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

Visit the gallery (extra pics)
Parameter Passing
Version Checking
Paul's Pages
My 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.

Click here to see the viewer gallery system in action, with extra pictures not on the PC Plus SuperCD. To view the source of the pages, just right-click on them and choose 'view source' from the pop-up menu (for full details of the code design, see Web Workshop in PC Plus, issue 156). You can also see information pages, complete with JavaScript code to copy, on passing parameters between pages, and checking for versions of Netscape and Microsoft browsers

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 Web Design Pages' menu here at

Back to Paul's PC Plus Pages menu