Once loaded and initialized and if no bookmark is found, the viewer will choose a preferred photo based on a flag or select one photo at random from a group of photos. The bookmark effect is achieved by Javascript, which simply parses the URL after the page has loaded, looking for an tag with a matching photo ID and loading that photo if it is found. it would be loaded.) A "" icon is provided next to each photo description, so people can click the link and add it to their favourites as they would any other. BookmarkingĮach photo is given a unique id so it can be "bookmarked" in the traditional sense (a unique URL pointing to a specific item or "anchor" within a page.) In the case of the photo with the ID fish00 and index.html being the URL, index.html#fish00 would point the browser directly to that photo (eg. The XML/XSLT section covers this in more detail. The provides a nice title for the collection, and the following simply lists the photos themselves along with descriptions (nested in tags so they can be hidden by CSS, but used by the presentational Javascript.)Įditing HTML is one option, but you can minimize the need for editing HTML if you choose to go with an XML-based template. The collection class is a generic container element the subsequent png classes are flags for PNG-based backgrounds handled by a Javascript object. The simplicity of the markup should make it easier to understand and modify. The photo viewer XHTML is structured to be both semantic and lightweight, while providing "hooks" for presentation via CSS without being excessive. Updates and customization are also made easier due to the component/module-based nature of this approach. This viewer is best suited for smaller collections of photos, although it could easily enough be split across multiple pages or sections on a web server the idea is that all photos are accessible from one actual HTML page, but this could be split to lower the page weight and load time.ĭevelopment and testing has been done under IE 5.0, 5.5 and 6.0, Netscape 7, Mozilla Firefox and Safari.Īs a general notice, this project is in flux and functionality may change as bugs are found and fixed and features are added.įollowing the standards-based "separation of concerns," the markup for the data (collections, photos and descriptions, and titles) is minimalised, leaving the visual presentation (style) to CSS and additional functionality (search, thumbnails, sound effects) to be added by Javascript. Sound effects are also added for fun where supported, and are fairly simple to modify. Thumbnails are dynamically displayed allowing for quick visual searches within a collection, and XML/XSLT functionality provides for more dynamic data sources and ease of updates. A few different CSS-driven "skins" are also available to choose from. This DHTML-driven browser-based app provides viewing of photos sorted by collection. There might be only one way to look at photos, but there are an infinite number of ways to organize and present them.
0 kommentar(er)
