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/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/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 = ( +
+
+ {i.name} +
+
+ by: {i.artist} +
+

{i.caption}

+
+ {i.tags ? i.tags.map(t => { + return (
{t.title}
); + }) : ''} +
+
+ ); + i.tags = []; + return i; + }); + + return ( +
+ +
+ ); + } +} + +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(, document.getElementById('demo4')); diff --git a/examples/index.html b/examples/index.html index 12d9f2e..d452830 100644 --- a/examples/index.html +++ b/examples/index.html @@ -138,6 +138,13 @@

undefined Optional. Array of srcsets for lightbox. + +customOverlay +element +undefined +Optional. A custom element to be rendered as tile overlay when hovering. + +

Gallery Options

@@ -380,6 +387,7 @@

react-grid-gallery is maintained by Ben Howell. 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'] }) //) diff --git a/src/Image.js b/src/Image.js index df3a84f..291273c 100644 --- a/src/Image.js +++ b/src/Image.js @@ -89,6 +89,16 @@ class Image extends Component { ; }); + var customOverlay = typeof this.props.item.customOverlay === 'undefined' ?