You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
images | array | undefined | Required. An array of objects containing image properties (see Image Options above).
77
77
enableImageSelection | bool | true | Optional. Allow images to be selectable. Setting this option to `false` whilst supplying images with `isSelected: true` will result in those images being permanently selected.
78
-
onSelectImage | func | undefined | Optional. Function to execute when an image is selected. Access to image object using `this` (See [Programmers note](#Programmers-Note) for info about Function.prototype.call()). Optional args: index (index of selected image in images array), image (the selected image). This function is only executable when `enableImageSelection: true`.
78
+
onSelectImage | func | undefined | Optional. Function to execute when an image is selected. Access to image object using `this` (See [Programmers notes](#Programmers-notes) for info about Function.prototype.call()). Optional args: index (index of selected image in images array), image (the selected image). This function is only executable when `enableImageSelection: true`.
79
79
rowHeight | number | 180 | Optional. The height of each row in the gallery.
80
80
maxRows | number | undefined | Optional. The maximum number of rows to show in the gallery.
81
81
margin | number | 2 | Optional. The margin around each image in the gallery.
82
82
enableLightbox | bool | true | Optional. Enable lightbox display of full size image when thumbnail clicked.
83
-
onClickThumbnail | func | openLightbox | Optional. Function to execute when gallery thumbnail clicked. Allows access to thumbnail using `this`via [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call). Optional args: index (index of selected image in images array), event (the click event). Overrides openLightbox.
84
-
lightboxWillOpen | func | undefined | Optional. Function to be called before opening lightbox. Allows access to gallery using `this`via [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call). Optional arg: index (index of selected image in images array).
85
-
lightboxWillClose | func | undefined | Optional. Function to be called before closing lightbox. Allows access to gallery using `this`via [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call).
83
+
onClickThumbnail | func | openLightbox | Optional. Function to execute when gallery thumbnail clicked. Allows access to thumbnail using `this`(See [Programmers notes](#Programmers-notes) for info about Function.prototype.call()). Optional args: index (index of selected image in images array), event (the click event). Overrides openLightbox.
84
+
lightboxWillOpen | func | undefined | Optional. Function to be called before opening lightbox. Allows access to gallery using `this`(See [Programmers notes](#Programmers-notes) for info about Function.prototype.call()). Optional arg: index (index of selected image in images array).
85
+
lightboxWillClose | func | undefined | Optional. Function to be called before closing lightbox. Allows access to gallery using `this`(See [Programmers notes](#Programmers-notes) for info about Function.prototype.call()).
86
86
tagStyle | object | tagStyle | Optional. Style to pass to tag elements. Overrides internal tag style.
87
-
tileViewportStyle | func | tileViewportStyle | Optional. Function to style the image tile viewport. Allows access to image tile viewport using `this`via [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call). Overrides internal tileViewportStyle function.
88
-
thumbnailStyle | func | thumbnailStyle | Optional. Function to style the image thumbnail. Allows access to thumbnail using `this`via [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call). Overrides internal thumbnailStyle function.
87
+
tileViewportStyle | func | tileViewportStyle | Optional. Function to style the image tile viewport. Allows access to image tile viewport using `this`(See [Programmers notes](#Programmers-notes) for info about Function.prototype.call()). Overrides internal tileViewportStyle function.
88
+
thumbnailStyle | func | thumbnailStyle | Optional. Function to style the image thumbnail. Allows access to thumbnail using `this`(See [Programmers notes](#Programmers-notes) for info about Function.prototype.call()). Overrides internal thumbnailStyle function.
89
89
90
90
## Lightbox Options
91
91
NOTE: these options are passed inside the Gallery tag.
@@ -124,28 +124,28 @@ lightboxWidth | number | 1024 | Optional. Maximum width of th
124
124
125
125
* Image Options: `thumbnail` can point to the same resource as `src`, bearing in mind the resultant data size of the gallery and page load cost. Thumbnails of whatever size will be scaled to match `rowHeight`.
126
126
127
-
* If you don't know your `thumbnailWidth` and `thumbnailHeight` values, you can find these out using any number of [javascript hacks](http://stackoverflow.com/a/1944298), bearing in mind the load penalty associated with these methods.
128
-
129
127
130
-
### Programmers Note
128
+
### Programmers Notes
131
129
132
130
* User defined functions that allow access to `this` via [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) do not require you to pass `this` as a parameter. `this` will be defined at the time the function is called.
133
131
134
132
e.g.
135
133
```js
136
-
//somewhere in your code...
134
+
//somewhere in your code...
137
135
functionmyTileViewportStyleFn() {
138
136
if (this.props.item.isSelected)
139
137
return {
140
-
//some awesome style
138
+
// something stylish...
141
139
};
142
140
}
143
141
144
-
//internally, within the react-grid-gallery component it will be called like so:
145
-
myTileViewportStyleFn.call(this);
142
+
//internally, within the react-grid-gallery component it will be called like so:
143
+
myTileViewportStyleFn.call(this);// this now refers to the image to be styled
146
144
147
145
```
148
146
147
+
* If you don't know your `thumbnailWidth` and `thumbnailHeight` values, you can find these out using any number of [javascript hacks](http://stackoverflow.com/a/1944298), bearing in mind the load penalty associated with these methods.
148
+
149
149
150
150
### License
151
151
React Grid Gallery is free to use for personal and commercial projects under the [MIT License](https://github.com/benhowell/react-grid-gallery/blob/master/LICENSE). Attribution is not required, but appreciated.
0 commit comments