v0.3.6

Author: ben

CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-grid-gallery
 
+### v0.3.6 / 2017-06-07
+
+* Added optional lightbox prop `showLightboxThumbnails` to display thumbnails beneath the Lightbox image.
+
+* Added optional lightbox prop `onClickLightboxThumbnail` as a fn to execute when lightbox thumbnail clicked. Overrides internal function: gotoImage.
+
+
 ### v0.3.5 / 2017-06-04
 
 * Refactored for react 16 (moved from PropTypes to prop-types package).

lib/Gallery.js

@@ -44,6 +44,7 @@ var Gallery = function (_Component) {
 
  _this.onResize = _this.onResize.bind(_this);
  _this.closeLightbox = _this.closeLightbox.bind(_this);
+ _this.gotoImage = _this.gotoImage.bind(_this);
  _this.gotoNext = _this.gotoNext.bind(_this);
  _this.gotoPrevious = _this.gotoPrevious.bind(_this);
  _this.onClickImage = _this.onClickImage.bind(_this);
@@ -136,13 +137,27 @@ var Gallery = function (_Component) {
  event.preventDefault();
  if (this.props.onSelectImage) this.props.onSelectImage(index, this.state.images[index]);
  }
+ }, {
+ key: 'gotoImage',
+ value: function gotoImage(index) {
+ this.setState({
+ currentImage: index
+ });
+ }
  }, {
  key: 'getOnClickThumbnailFn',
  value: function getOnClickThumbnailFn() {
  if (!this.props.onClickThumbnail && this.props.enableLightbox) return this.openLightbox;
  if (this.props.onClickThumbnail) return this.props.onClickThumbnail;
  return null;
  }
+ }, {
+ key: 'getOnClickLightboxThumbnailFn',
+ value: function getOnClickLightboxThumbnailFn() {
+ if (!this.props.onClickLightboxThumbnail && this.props.showLightboxThumbnails) return this.gotoImage;
+ if (this.props.onClickLightboxThumbnail && this.props.showLightboxThumbnails) return this.props.onClickLightboxThumbnail;
+ return null;
+ }
  }, {
  key: 'getOnClickImageFn',
  value: function getOnClickImageFn() {
@@ -290,7 +305,9 @@ var Gallery = function (_Component) {
  showImageCount: this.props.showImageCount,
  onClose: this.closeLightbox,
  width: this.props.lightboxWidth,
- theme: this.props.theme
+ theme: this.props.theme,
+ onClickThumbnail: this.getOnClickLightboxThumbnailFn(),
+ showThumbnails: this.props.showLightboxThumbnails
  })
  );
  }
@@ -338,7 +355,9 @@ Gallery.propTypes = {
  showCloseButton: _propTypes2.default.bool,
  showImageCount: _propTypes2.default.bool,
  lightboxWidth: _propTypes2.default.number,
- theme: _propTypes2.default.object
+ theme: _propTypes2.default.object,
+ showLightboxThumbnails: _propTypes2.default.bool,
+ onClickLightboxThumbnail: _propTypes2.default.func
 };
 
 Gallery.defaultProps = {
@@ -355,7 +374,8 @@ Gallery.defaultProps = {
  showCloseButton: true,
  showImageCount: true,
  lightboxWidth: 1024,
- theme: {}
+ theme: {},
+ showLightboxThumbnails: false
 };
 
 module.exports = Gallery;

lib/react-grid-gallery.bundle.min.js

@@ -1,6 +1,6 @@
 {
  "name": "react-grid-gallery",
- "version": "0.3.5",
+ "version": "0.3.6",
  "description": "Justified gallery component for React.",
  "main": "lib/Gallery.js",
  "dependencies": {