Issue
156 - Photo Gallery 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
|
 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.
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 www.paulspages.co.uk. Back to Paul's PC Plus Pages menu
|
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.