Merge pull request #22 from ValYouW/add-custom-overlay

Add option to render a custom thumbnail overlay on hover

.gitignore

@@ -3,3 +3,4 @@ require.js
 *.bundle.js
 examples/dist
 .publish
+.idea

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
 

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'));

examples/index.html

@@ -138,6 +138,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>
@@ -380,6 +387,7 @@ <h4><a href="https://github.com/benhowell/react-grid-gallery/blob/master/example
 
 
 
+
       <footer class="site-footer">
         <span class="site-footer-owner"><a href="https://github.com/benhowell/react-grid-gallery">react-grid-gallery</a> is maintained by <a href="https://github.com/benhowell">Ben Howell</a>.</span>
 

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']
         })
 //)

src/Image.js

@@ -89,6 +89,16 @@ class Image extends Component {
                         </div>;
                 });
 
+        var customOverlay = typeof this.props.item.customOverlay === 'undefined' ? <noscript/> :
+            <div style={{
+	            pointerEvents: "none",
+	            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 +137,8 @@ class Image extends Component {
                 {tags}
             </div>
 
+                {customOverlay}
+
                 <div className="tile-overlay"
             key={"tile-overlay-"+this.props.index}
             style={{
@@ -165,7 +177,8 @@ Image.propTypes = {
     height: PropTypes.number,
     isSelectable: PropTypes.bool,
     onClick: PropTypes.func,
-    onSelectImage: PropTypes.func
+    onSelectImage: PropTypes.func,
+    customOverlay: PropTypes.element
 };
 
 Image.defaultProps = {