From 28be07c9aa951b122acd815a39cf70f534194eba Mon Sep 17 00:00:00 2001
From: ValYouW <ValYouW@gmail.com>
Date: Thu, 20 Apr 2017 22:37:20 +0300
Subject: [PATCH 1/3] Add option to render a custom overlay on a tile when
 hover

---
 README.md           |  4 ++--
 examples/index.html |  7 +++++++
 src/Image.js        | 14 +++++++++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 0d75b3c..87cb266 100644
--- a/README.md
+++ b/README.md
@@ -66,8 +66,8 @@ thumbnailHeight         | number        | undefined     | Required. Height of th
 tags                    | array         | undefined     | Optional. An array of objects containing tag attributes (value and title). e.g. `{value: "foo", title: "bar"}`
 isSelected              | bool          | undefined     | Optional. The selected state of the image.
 caption                 | string        | undefined     | Optional. Image caption.
-srcset 	                | array 	| undefined 	| Optional. Array of srcsets for lightbox.
-
+srcset 	                | array         | undefined 	| Optional. Array of srcsets for lightbox.
+customOverlay           | element       | undefined     | Optional. A custom element to be rendered as tile overlay when hovering.
 
 ## Gallery Options
 
diff --git a/examples/index.html b/examples/index.html
index 1c51bde..69fbb38 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -134,6 +134,13 @@ <h2><a id="user-content-image-options" class="anchor" href="#image-options" aria
 <td align="left">undefined</td>
 <td align="left">Optional. Array of srcsets for lightbox.</td>
 </tr>
+<tr>
+<td align="left">customOverlay</td>
+<td align="left">element</td>
+<td align="left">undefined</td>
+<td align="left">Optional. A custom element to be rendered as tile overlay when hovering.</td>
+</tr>
+
 </tbody></table>
 
 <h2><a id="user-content-gallery-options" class="anchor" href="#gallery-options" aria-hidden="true"></a>Gallery Options</h2>
diff --git a/src/Image.js b/src/Image.js
index df3a84f..4901b7d 100644
--- a/src/Image.js
+++ b/src/Image.js
@@ -89,6 +89,15 @@ class Image extends Component {
                         </div>;
                 });
 
+        var customOverlay = typeof this.props.item.customOverlay === 'undefined' ? <noscript/> :
+            <div style={{
+	            opacity: this.state.hover ? 1 : 0,
+	            position: "absolute",
+	            height: "100%",
+	            width: "100%"}}>
+                {this.props.item.customOverlay}
+            </div>;
+
         return (
                 <div className="tile"
             key={"tile-"+this.props.index}
@@ -127,6 +136,8 @@ class Image extends Component {
                 {tags}
             </div>
 
+                {customOverlay}
+
                 <div className="tile-overlay"
             key={"tile-overlay-"+this.props.index}
             style={{
@@ -165,7 +176,8 @@ Image.propTypes = {
     height: PropTypes.number,
     isSelectable: PropTypes.bool,
     onClick: PropTypes.func,
-    onSelectImage: PropTypes.func
+    onSelectImage: PropTypes.func,
+    customOverlay: PropTypes.element
 };
 
 Image.defaultProps = {

From e2a0dbe64eccaca83a7f65c8d88a0ab838857f32 Mon Sep 17 00:00:00 2001
From: ValYouW <ValYouW@gmail.com>
Date: Fri, 21 Apr 2017 17:50:30 +0300
Subject: [PATCH 2/3] Add custom overlay example

---
 .gitignore          |   1 +
 examples/demo4.js   | 129 ++++++++++++++++++++++++++++++++++++++++++++
 examples/index.html |   4 +-
 gulpfile.js         |   3 +-
 4 files changed, 134 insertions(+), 3 deletions(-)
 create mode 100644 examples/demo4.js

diff --git a/.gitignore b/.gitignore
index 4c08725..4b6c38e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ require.js
 *.bundle.js
 examples/dist
 .publish
+.idea
diff --git a/examples/demo4.js b/examples/demo4.js
new file mode 100644
index 0000000..d5ec409
--- /dev/null
+++ b/examples/demo4.js
@@ -0,0 +1,129 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Gallery from '../src/Gallery';
+
+
+class Demo4 extends React.Component {
+	constructor(props){
+		super(props);
+
+		this.state = {
+			images: this.props.images
+		};
+
+	}
+
+	render () {
+		var captionStyle = {
+			backgroundColor: 'rgba(0, 0, 0, 0.8)',
+			maxHeight: '240px',
+			overflow: 'auto',
+			position: 'absolute',
+			bottom: '0',
+			width: '100%',
+			color: 'white',
+			padding: '3px',
+			fontSize: '0.8em'
+		};
+
+		var imageTitleStyle = {
+			fontSize: '1.5em'
+		};
+
+		var chipStyle = {
+			display: 'inline-block',
+			backgroundColor: '#fff',
+			height: 'auto',
+			lineHeight: 'inherit',
+			padding: '2px 2px',
+			borderRadius: '2px',
+			color: 'black',
+			marginRight: '3px'
+		};
+
+		var images = this.state.images.map(i => {
+			i.customOverlay = (
+				<div style={captionStyle}>
+					<div style={imageTitleStyle}>
+						<span>{i.name}</span>
+					</div>
+					<div>
+						by: {i.artist}
+					</div>
+					<p>{i.caption}</p>
+					<div className="tags">
+						{i.tags ? i.tags.map(t => {
+							return (<div key={t.value} style={chipStyle}>{t.title}</div>);
+						}) : ''}
+					</div>
+				</div>
+			);
+			i.tags = [];
+			return i;
+		});
+
+		return (
+			<div style={{
+				display: "block",
+				minHeight: "1px",
+				width: "100%",
+				border: "1px solid #ddd",
+				overflow: "auto"}}>
+				<Gallery
+					images={images}
+					rowHeight={240}
+					enableImageSelection={false}/>
+			</div>
+		);
+	}
+}
+
+Demo4.propTypes = {
+	images: React.PropTypes.arrayOf(
+		React.PropTypes.shape({
+			src: React.PropTypes.string.isRequired,
+			thumbnail: React.PropTypes.string.isRequired,
+			srcset: React.PropTypes.array,
+			caption: React.PropTypes.string,
+			thumbnailWidth: React.PropTypes.number.isRequired,
+			thumbnailHeight: React.PropTypes.number.isRequired
+		})
+	).isRequired
+};
+
+Demo4.defaultProps = {
+	images: shuffleArray([
+		{
+			src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
+			thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
+			thumbnailWidth: 320,
+			thumbnailHeight: 174,
+			tags: [{value: "Nature", title: "Nature"}, {value: "Flora", title: "Flora"}],
+			name: 'After Rain',
+			caption: "After Rain (Jeshu John - designerspics.com)",
+			artist: 'Jeshu John'
+		},
+		{
+			src: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_b.jpg",
+			thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg",
+			thumbnailWidth: 240,
+			thumbnailHeight: 320,
+			tags: [{value: "Nature", title: "Nature"}, {value: "Water", title: "Water"}],
+			name: '8H',
+			caption: "8H (gratisography.com)",
+			artist: 'gratisography.com'
+		},
+		{
+			src: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_b.jpg",
+			thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg",
+			thumbnailWidth: 320,
+			thumbnailHeight: 148,
+			tags: [{value: "People", title: "People"}],
+			name: '315H',
+			caption: "315H (gratisography.com)",
+			artist: 'gratisography.com'
+		}
+	])
+};
+
+ReactDOM.render(<Demo4 />, document.getElementById('demo4'));
diff --git a/examples/index.html b/examples/index.html
index 69fbb38..b96f4d2 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -731,8 +731,8 @@ <h3><a id="simple-gallery" class="anchor" href="#simple-gallery" aria-hidden="tr
 
 <span class="pl-smi">ReactDOM</span><span class="pl-k">.</span><span class="pl-en">render</span>(&lt;<span class="pl-ent"><span class="pl-c1">Demo3</span></span> /&gt;,<span class="pl-c1"> document</span><span class="pl-k">.</span><span class="pl-en">getElementById</span>(<span class="pl-s"><span class="pl-pds">'</span>demo3<span class="pl-pds">'</span></span>));</pre>
 
-
-
+<h3>Custom Overlay</h3>
+<div id="demo4"></div>
 
 <h3><a id="code-sample" class="anchor" href="#code-sample" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Code Sample (from demo at the top of the page)</h3>
 
diff --git a/gulpfile.js b/gulpfile.js
index 0fcef0d..953b34e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -74,7 +74,8 @@ gulp.task('browserify', function() {
             browserify(['./examples/app.js',
                         './examples/demo1.js',
                         './examples/demo2.js',
-                        './examples/demo3.js'], {
+                        './examples/demo3.js',
+                        './examples/demo4.js'], {
         extensions: ['.js', '.jsx']
         })
 //)

From 93110c2ef46a38d4578ff26568f90bb313a0ec56 Mon Sep 17 00:00:00 2001
From: ValYouW <ValYouW@gmail.com>
Date: Fri, 21 Apr 2017 18:01:47 +0300
Subject: [PATCH 3/3] Fix LightBox not opening

---
 src/Image.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Image.js b/src/Image.js
index 4901b7d..291273c 100644
--- a/src/Image.js
+++ b/src/Image.js
@@ -91,6 +91,7 @@ class Image extends Component {
 
         var customOverlay = typeof this.props.item.customOverlay === 'undefined' ? <noscript/> :
             <div style={{
+	            pointerEvents: "none",
 	            opacity: this.state.hover ? 1 : 0,
 	            position: "absolute",
 	            height: "100%",