Last week I completed the creation of an online yearbook for our son. We homeschool him and create a portfolio or yearbook each year sampling his work and the progress he’s made. This year I decided to create the yearbook online, saving paper and storage space, and allowing us to share his work with family and friends.

I created the site statically using a combination of CSS, Javascript, HTML, and Flash. You can view the site here. I thought I would share in this post, the libraries I used and what issues I had ensuring it worked cross-browser.

Technologies/Libraries Used

First, on most pages I have a photo that is rotated with a Polaroid type effect applied to it (see photo below). I could have done this in an image editor, but choose in this case (for a low-trafficked site) to use Javascript. I used the Instant.js javascript library to accomplish this effect. It’s very easy to use and I had very few problems with it (see below).

Home Page

Second, to create the photo galleries used mainly in the Art and Field Trip sections (and in the World War II Day example below), I used the PostcardViewer from Airtight Interactive. Once again, I found this very easy to use. I already use Google Picassa to manage my photos, and PostcardViewer can be downloaded as a Picassa template.

Note: I highly recommend you try Picassa if you aren’t using it already.

With Picassa installed and the PostcardViewer template downloaded into it, all you have to do then is choose to export photos and save using the PostcardViewer template and it sets up most of what you need. I did have to go back in and resample the photos because I wanted a size that Picassa doesn’t export in. I then modified the HTML page it created to match my look and feel. PostcardViewer uses an XML file to list the photos that are shown, and you can customize it to change how zoomed in you want the photo thumbnails and how many columns you want them displayed in, as well as a few other customizations.

Polaroid Effect Photo Gallery

The third library I used on the site was the LightBox 2. This was used on some of the Subjects pages, for example Math (shown below), Science, Writing, etc, so I could show samples of his work, which I scanned in.

LightBox Usage

These three libraries worked together nicely, two of them matching well due to their Polaroid effects. In addition to these I also created a navigation using Javascript that allows sections and subsections to be collapsed and expanded. When the user enters a section like Subjects, I default that section to being pre-expanded, speeding up navigation for the user as they move through each section.

Cross Browser Issues

I first created this site entirely in FireFox because my primary goal was to demonstrate this to the licensed Florida teacher we have to share this with each year to fulfill the Florida homeschool law. Therefore, I knew I would be showing it on my laptop with my browser.

Once that was completed, and I prepared to post it online, I tested it against Internet Explorer 6 and 7. I was braced for hours of CSS and Javascript adjustments to make it render properly, but was pleasantly surprised to find very few issues. Here is a list of the issues I did encounter:

1. One jpeg displayed as broken. Upon troubleshooting, it turned out the jpeg had multiple layers in it (I failed to merge them before exporting). Firefox can show these (impressively), but IE cannot. Solution: Open the jpeg and merge the layers down.

2. The border shading that the Instant.js library uses for the Polaroid effect on the photos is much thicker in IE than in Firefox, so two of the pages had the alignment off because they overflowed the widths. Solution: All I had to do was reduce the padding on those two pages and it was fine.

3. On one of the pages, one of the photos was being fattened by the Polaroid effect from Instant.js. For some reason, on that page and that page only, it was widening the image to fill the image size plus the padding I had added to it. Really weird bug (not sure who was causing it, IE or Instant.js). Solution: I was able to remove the padding from the image and place it on a surrounding span.

That was it! All my javascript expanding and collapsing navigation worked. All the photo galleries, worked, and all my other alignment was fine.

Who says CSS and Javascript in multiple browsers is hard?