It's not new news that cross-browser compatibility is one of the biggest pains in developing for the web. I've experienced it for myself, yet again.
For my recent New Mexico trip, I wanted to kill two birds with one stone:
- Develop an interactive photo gallery, and
- Explore the Simile Exhibit and Timeline widgets
Out of 500+ photos I chose 195 that I considered the best. To display them, here's the process I undertook:
- Extracted EXIF data using ExifTool GUI to a text file
- Compiled a list of the files in Excel with the following data: filename, URL on server, when it was taken, where it was taken (latitude, longitude, using http://www.getlatlon.com), location (for the ones with a definite location), categories the photos belong to, and the lens I used
- Converted the Excel file to JSON format using Simile's Babel service. The JSON file needed some minor fixes with quotation marks, but that didn't take long.
- From there I followed the documentation for Exhibit and ended up with this page.
Right now the Exhibit gallery works best in Opera, and even there the 'coordinator' feature of Exhibit doesn't work. In IE and Firefox the Timeline loads without the customization script in the html file. The odd thing is that to get the page to load at all in IE and Firefox, I had to purposely leave out a comma in the customization script. Since it has that syntactical error, IE and Firefox ignore it altogether and (apparently) Opera overlooks it.
It would be nice to get the coordinator feature working, because then the photo selected in the timeline will show up on the map also, and vice versa. For now I've created a separate version, without the timeline, here.
The nice thing is that Exhibit allows for Thickbox functionality. The not-so-nice part, at least right now, is that it doesn't work well in IE. For some reason when you scroll farther down a page and click on a thumbnail, the thickbox full-image opens at the top of the page, out of sight. Firefox and Opera don't have this problem.