Add the ability to display image captions

Add the optional imageCaption property of type node.
Use exactly the same way as imageTitle propery.
Use 'caption' and 'captionContent' classes for default style.
Style wrapper with 'caption' and 'ril-caption' classes.
Style content with 'caption-content' and 'ril-caption-content' classes.

Author: c00kiemon5ter

README.md

@@ -96,7 +96,8 @@ animationOnKeyInput | bool   | `false`        |          | Disable animation on
 animationDuration   | number | `300`          |          | Animation duration (ms)
 keyRepeatLimit      | number | `180`          |          | Required interval of time (ms) between key actions (prevents excessively fast navigation of images)
 keyRepeatKeyupBonus | number | `40`           |          | Amount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images)
-imageTitle          | string |                |          | Image title
+imageTitle          | node   |                |          | Image title
+imageCaption        | node   |                |          | Image caption - a small piece of text that describes the image
 toolbarButtons      | node[] |                |          | Array of custom toolbar buttons
 reactModalStyle     | Object | `{}`           |          | Set z-index style, etc., for the parent react-modal (format: https://github.com/reactjs/react-modal#styles )
 imagePadding        | number | `10`           |          | Padding (px) between the edge of the window and the lightbox

src/examples/cats/app.js

@@ -61,6 +61,33 @@ const titles = [
     </span>),
 ];
 
+const captions = [
+    '',
+    'Sad kitten wants a hug',
+    (<p>
+        .. not in the&nbsp;
+        <em>
+            mood
+        </em>
+        &nbsp;for games right now
+    </p>),
+    (<p>
+        Meow!? What do you mean by «Earth is&nbsp;
+        <strong>
+            round
+        </strong>
+        »? Are you&nbsp;
+        <em>
+            absolutely
+        </em>
+        &nbsp;
+        <strong>
+            sure
+        </strong>
+        &nbsp;you know what you&#39;re talking about?
+    </p>),
+];
+
 const App = React.createClass({
     getInitialState() {
         return {
@@ -98,6 +125,7 @@ const App = React.createClass({
                     onMoveNextRequest={this.moveNext}
 
                     imageTitle={titles[this.state.index]}
+                    imageCaption={captions[this.state.index]}
                 />
             );
         }

src/react-image-lightbox.js

@@ -36,6 +36,14 @@ if (_ieVersion < 10) {
     };
 }
 
+function handleCaptionMousewheel(event) {
+    event.stopPropagation();
+}
+
+function handleCaptionMouseDown(event) {
+    event.stopPropagation();
+}
+
 class ReactImageLightbox extends Component {
     constructor(props) {
         super(props);
@@ -84,6 +92,8 @@ class ReactImageLightbox extends Component {
         this.requestClose             = this.requestClose.bind(this);
         this.requestMoveNext          = this.requestMoveNext.bind(this);
         this.requestMovePrev          = this.requestMovePrev.bind(this);
+        this.handleCaptionMousewheel  = handleCaptionMousewheel;
+        this.handleCaptionMouseDown   = handleCaptionMouseDown;
     }
 
     componentWillMount() {
@@ -1147,6 +1157,21 @@ class ReactImageLightbox extends Component {
                             </li>
                         </ul>
                     </div>
+
+                    {!this.props.imageCaption ? '' :
+                    <div // Image caption
+                        onWheel={this.handleCaptionMousewheel}
+                        onMouseDown={this.handleCaptionMouseDown}
+                        className={`ril-caption ${styles.caption}`}
+                    >
+                        <div
+                            className={`ril-caption-content ${styles.captionContent}`}
+                        >
+                            {this.props.imageCaption}
+                        </div>
+                    </div>
+                    }
+
                 </div>
             </Modal>
         );
@@ -1239,6 +1264,9 @@ ReactImageLightbox.propTypes = {
     // Image title
     imageTitle: PropTypes.node,
 
+    // Image caption
+    imageCaption: PropTypes.node,
+
     //-----------------------------
     // Lightbox style
     //-----------------------------

src/style.scss

@@ -1,4 +1,5 @@
 $toolbarHeight: 50px;
+$maxCaptionHeight: 150px;
 
 @keyframes closeWindow {
     0%   { opacity: 1; }
@@ -94,17 +95,32 @@ $toolbarHeight: 50px;
     background-size: cover;
 }
 
+.caption,
 .toolbar {
     background-color: rgba(0, 0, 0, 0.5);
     position: absolute;
     left: 0;
-    top: 0;
     right: 0;
-    height: $toolbarHeight;
     display: flex;
     justify-content: space-between;
 }
 
+.caption {
+    bottom: 0;
+    max-height: $maxCaptionHeight;
+    overflow: auto;
+
+    .captionContent {
+        padding: 10px 20px;
+        color: #FFF;
+    }
+}
+
+.toolbar {
+    top: 0;
+    height: $toolbarHeight;
+}
+
 .toolbarSide {
     height: $toolbarHeight;
     margin: 0;