Skip to content

Commit c6eeef0

Browse files
author
ben
committed
Merge branch 'master' of github.com:benhowell/react-grid-gallery
2 parents abe70c4 + 7cf2d2d commit c6eeef0

File tree

5 files changed

+165
-10
lines changed

5 files changed

+165
-10
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ lightboxWillClose | func | undefined | Optional. Function to
9494
tagStyle | object | tagStyle | Optional. Style to pass to tag elements. Overrides internal tag style.
9595
tileViewportStyle | func | tileViewportStyle | Optional. Function to style the image tile viewport. Allows access to image object using `this` (See [Programmers notes](#programmers-notes) for more info about implicit `this`). Overrides internal tileViewportStyle function.
9696
thumbnailStyle | func | thumbnailStyle | Optional. Function to style the image thumbnail. Allows access to image object using `this` (See [Programmers notes](#programmers-notes) for more info about implicit `this`). Overrides internal thumbnailStyle function.
97+
thumbnailImageComponent | React component | undefined | Optional. Substitute in a React component that would get passed `imageProps` (the props that would have been passed to the `<img>` tag) and `item` (the original item in `images`) to be used to render thumbnails; useful for lazy loading.
9798

9899
## Lightbox Options
99100
NOTE: these options are passed inside the Gallery tag.

‎examples/demo7.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
import Gallery from '../src/Gallery';
5+
6+
class ImageComponent extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = {
10+
show: false
11+
};
12+
}
13+
14+
render () {
15+
if (this.state.show) {
16+
return <img {...this.props.imageProps} />;
17+
} else {
18+
return (
19+
<div
20+
style={Object.assign({}, this.props.imageProps.style, { textAlign: 'center' })}
21+
onMouseOver={() => this.setState({ show: true })}
22+
>
23+
Hover to show
24+
</div>
25+
);
26+
}
27+
}
28+
}
29+
30+
class Demo7 extends React.Component {
31+
constructor(props){
32+
super(props);
33+
34+
this.state = {
35+
images: this.props.images
36+
};
37+
}
38+
39+
render () {
40+
return (
41+
<div style={{
42+
display: "block",
43+
minHeight: "1px",
44+
width: "100%",
45+
border: "1px solid #ddd",
46+
overflow: "auto"}}>
47+
<Gallery
48+
images={this.state.images}
49+
lightboxWidth={1536}
50+
thumbnailImageComponent={ImageComponent}
51+
enableLightbox={true}
52+
enableImageSelection={false}
53+
/>
54+
</div>
55+
);
56+
}
57+
}
58+
59+
Demo7.propTypes = {
60+
images: PropTypes.arrayOf(
61+
PropTypes.shape({
62+
src: PropTypes.string.isRequired,
63+
thumbnail: PropTypes.string.isRequired,
64+
srcset: PropTypes.array,
65+
caption: PropTypes.string,
66+
thumbnailWidth: PropTypes.number.isRequired,
67+
thumbnailHeight: PropTypes.number.isRequired,
68+
isSelected: PropTypes.bool
69+
})
70+
).isRequired
71+
};
72+
73+
Demo7.defaultProps = {
74+
images: shuffleArray([
75+
{
76+
src: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_b.jpg",
77+
thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg",
78+
thumbnailWidth: 240,
79+
thumbnailHeight: 320,
80+
caption: "8H (gratisography.com)"
81+
},
82+
{
83+
src: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_b.jpg",
84+
thumbnail: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_n.jpg",
85+
thumbnailWidth: 320,
86+
thumbnailHeight: 190,
87+
caption: "286H (gratisography.com)"
88+
},
89+
{
90+
src: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_b.jpg",
91+
thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg",
92+
thumbnailWidth: 320,
93+
thumbnailHeight: 148,
94+
caption: "315H (gratisography.com)"
95+
},
96+
{
97+
src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg",
98+
thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg",
99+
thumbnailWidth: 320,
100+
thumbnailHeight: 213,
101+
caption: "201H (gratisography.com)"
102+
},
103+
{
104+
src: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_b.jpg",
105+
thumbnail: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_n.jpg",
106+
thumbnailWidth: 248,
107+
thumbnailHeight: 320,
108+
caption: "Big Ben (Tom Eversley - isorepublic.com)"
109+
},
110+
{
111+
src: "https://c1.staticflickr.com/9/8785/28687743710_870813dfde_h.jpg",
112+
thumbnail: "https://c1.staticflickr.com/9/8785/28687743710_3580fcb5f0_n.jpg",
113+
thumbnailWidth: 320,
114+
thumbnailHeight: 113,
115+
caption: "Red Zone - Paris (Tom Eversley - isorepublic.com)"
116+
},
117+
{
118+
src: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_b.jpg",
119+
thumbnail: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_n.jpg",
120+
thumbnailWidth: 313,
121+
thumbnailHeight: 320,
122+
caption: "Wood Glass (Tom Eversley - isorepublic.com)"
123+
},
124+
{
125+
src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg",
126+
thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg",
127+
thumbnailWidth: 320,
128+
thumbnailHeight: 213,
129+
caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)"
130+
}
131+
])
132+
};
133+
134+
ReactDOM.render(<Demo7 />, document.getElementById('demo7'));

‎examples/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,13 @@ <h3><a id="custom-controls" class="anchor" href="#custom-controls" aria-hidden="
122122

123123
<div id="demo6"></div>
124124
<h4><a href="https://github.com/benhowell/react-grid-gallery/blob/master/examples/demo6.js">Code</a></h4>
125+
<br>
126+
127+
<h3><a id="custom-image-component" class="anchor" href="#custom-image-component" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Custom Image Component (useful for lazy loading)
128+
</h3>
129+
130+
<div id="demo7"></div>
131+
<h4><a href="https://github.com/benhowell/react-grid-gallery/blob/master/examples/demo7.js">Code</a></h4>
125132
<br>
126133

127134
<footer class="site-footer">

‎src/Gallery.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ class Gallery extends Component {
3030
}
3131

3232
componentWillReceiveProps (np) {
33+
if (this.state.currentImage > np.images.length - 1) {
34+
this.setState({currentImage: np.images.length - 1});
35+
}
3336
if(this.state.images != np.images || this.props.maxRows != np.maxRows){
3437
this.setState({
3538
images: np.images,
@@ -263,6 +266,7 @@ class Gallery extends Component {
263266
tagStyle={this.props.tagStyle}
264267
tileViewportStyle={this.props.tileViewportStyle}
265268
thumbnailStyle={this.props.thumbnailStyle}
269+
thumbnailImageComponent={this.props.thumbnailImageComponent}
266270
/>;});
267271
var resizeIframeStyles = {
268272
height: 0,
@@ -362,7 +366,8 @@ Gallery.propTypes = {
362366
thumbnailStyle: PropTypes.func,
363367
showLightboxThumbnails: PropTypes.bool,
364368
onClickLightboxThumbnail: PropTypes.func,
365-
tagStyle: PropTypes.object
369+
tagStyle: PropTypes.object,
370+
thumbnailImageComponent: PropTypes.func
366371
};
367372

368373
Gallery.defaultProps = {
@@ -380,7 +385,7 @@ Gallery.defaultProps = {
380385
showCloseButton: true,
381386
showImageCount: true,
382387
lightboxWidth: 1024,
383-
showLightboxThumbnails: false
388+
showLightboxThumbnails: false,
384389
};
385390

386391
module.exports = Gallery;

‎src/Image.js‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ class Image extends Component {
3434
return this.props.tileViewportStyle.call(this);
3535
var nanoBase64Backgorund = {}
3636
if(this.props.item.nano) {
37-
nanoBase64Backgorund = {
37+
nanoBase64Backgorund = {
3838
background: `url(${this.props.item.nano})`,
3939
backgroundSize: 'cover',
4040
backgroundPosition: 'center center'
@@ -161,6 +161,16 @@ class Image extends Component {
161161
{this.props.item.customOverlay}
162162
</div>;
163163

164+
var thumbnailProps = {
165+
key: "img-"+this.props.index,
166+
src: this.props.item.thumbnail,
167+
alt: alt,
168+
title: this.props.item.caption,
169+
style: this.thumbnailStyle(),
170+
};
171+
172+
var ThumbnailImageComponent = this.props.thumbnailImageComponent;
173+
164174
return (
165175
<div className="tile"
166176
key={"tile-"+this.props.index}
@@ -221,12 +231,9 @@ class Image extends Component {
221231
key={"tile-viewport-"+this.props.index}
222232
onClick={this.props.onClick ?
223233
(e) => this.props.onClick.call(this, this.props.index, e) : null}>
224-
<img
225-
key={"img-"+this.props.index}
226-
src={this.props.item.thumbnail}
227-
alt={alt}
228-
title={this.props.item.caption}
229-
style={this.thumbnailStyle()} />
234+
{ThumbnailImageComponent ?
235+
<ThumbnailImageComponent {...this.props} imageProps={thumbnailProps} /> :
236+
<img {...thumbnailProps} />}
230237
</div>
231238
{this.props.item.thumbnailCaption && (
232239
<div className="tile-description"
@@ -259,7 +266,8 @@ Image.propTypes = {
259266
tileViewportStyle: PropTypes.func,
260267
thumbnailStyle: PropTypes.func,
261268
tagStyle: PropTypes.object,
262-
customOverlay: PropTypes.element
269+
customOverlay: PropTypes.element,
270+
thumbnailImageComponent: PropTypes.func
263271
};
264272

265273
Image.defaultProps = {

0 commit comments

Comments
 (0)