I started with Twitter's Bootstrap because it's a favorite of mine and
makes the often daunting task of building a responsive site fairly
simple. I used an ajax call in jquery to pull in the gallery.json data
and this was my first time doing so. It was a difficult but rewarding
challenge.

After displaying all the data for each image on the page I felt it
looked messy with descriptions of different lengths so I added
fancybox.js to neatly display the description and attribution in a
modal window. This plugin is great because it allows scrolling through
each image in the gallery, along with a thumbnail option for jumping
ahead in the slideshow.

The descriptions are still not displaying correctly. The parser seems
to die when it hits an apostrophe in the data file, and I can't seem to
find a good reason for it. I tried a few different fixes but
unfortunately came up short. I tried replacing the apostrophes with
html entities using the .replace method but this caused a few images to
not load on the page and that wasn't good either.

During this exercise the fox became my nemesis. I attempted to clip the
top portion of the photo so he would sit in line with the other animals
whose photos were nicely cropped. I failed at this and for that I am
very sad. I attempted to add a div around each image and set a uniform
image height, but this would only work on window resize, and not on
load so I removed it.

Another issue is the following: I develop in Firefox and it wasn't
until much later I discovered that the data was not displaying in
Chrome or Internet Explorer. This may be also be because of the
apostrophes in the json file.

Some things I succeeded at were: The gallery is responsive and the
images scale nicely. The data file DOES display in Firefox and I was
able to pull in most items. If any of items were empty I displayed a
blank space so that 'undefined' wouldn't write to the page.