Photo Gallery Demos

These versions use various coding techniques like, from inline Spry attributes to progressive enhancement for graceful degradation. DIfferent coders have different goals and these sample show various ways to accomplish the same end product..

Gallery Demo

Original Photo Gallery

This version uses XML data and inline Spry attributes to generate the markup. This demonstrates how to build a HTML template. It also showcases multiple dependent data sets. With javascript off, it does not degrade gracefully.

Photo Gallery version 2

This version has been updated to use more modular code. The thumbnail region and the main image region have been written to act as widgets, with some code to bind them together. This makes the gallery easier to disassemble and modify. It also uses the XML Data set.

Static Photo Gallery

This uses progressive enhancement to add animations and additional functionality to static content. No Spry Data Sets are used; only the modular code pieces used in version 2 and the Element Selector do the work. This is a useful technique if the static content already exists and you want to upgrade the user experience. This also degrade nicely when javascript is turned off.

HTML Data Set Photo Gallery

Using inline content as a data source and using regions to change the look and feel of the gallery. Using internal HTML data sets is helpful with search engine optimization and graceful degradation.

 

Note: Due to limitations of Safari 2.0, we have not presented a demo that unobtrusively attaches Spry attributes. This is because Safari does not handle adding namespaced attribute. It appears that Safari 3 has solved that limitation. We do have a sample of this technique here and here. Unobtrusively adding Spry attributes is useful when page validation is important.

Spry Gallery for Adobe AIR

This version of the Photo Gallery shows how the page should be coded for Adobe AIR. Check this code against the original version to see what changes were made. This is just the sample code. Please read the AIR packaging readme in order to learn more on how to build the AIR package.