Descriptions for zoomed images.

[Libbum]

Implements a solution to the enhancement request #5.

The photo array can be extended with a desc key, with either a plain text or html value (examples shown below).

var photos = [
   {
            "small": "http://img3.chromatic.io/2fbd62df-4081-6102-8126-3e52736951f1/small.jpg",
            "big": "http://img3.chromatic.io/2fbd62df-4081-6102-8126-3e52736951f1/big.jpg",
            "aspect_ratio": 1.5047879616963065,
            "desc": "Some text about this photo."
   },
   {
            "small": "http://img3.chromatic.io/6c969b53-95c0-d2ee-5e1b-d8a93f6f7fb6/small.jpg",
            "big": "http://img3.chromatic.io/6c969b53-95c0-d2ee-5e1b-d8a93f6f7fb6/big.jpg",
            "aspect_ratio": 1.5047879616963065,
            "desc": "<h3>A title</h3> And some <i>totally interesting</i> information."
  }
];

A small arrow is visible at the bottom of the screen which can be clicked to show the descriptions, then clicked again to hide them. These arrows are hidden along with the left/right navigation arrows so they don't stick out when not needed. The description is persistent until the user chooses to close them.

One caveat here is the removal of the swipe-up-to-close option, as this now shows the description (which is hidden by default). Unsure if this is really a major problem though - you still have click to close.

I haven't extended the options to allow descriptions on by default, but that would be a simple change to just call showInfo in the constructor if a flag is passed in.

Layout of the description is pretty easy to style using the chromatic-zoom-desc class in the css. There's no reason you can't change this to something closer to what you feel a chromatic.js description should look like. This was just my quick rendition.