react-image-gallery - npm Package Compare versions

Comparing version 0.7.5 to 0.7.6

build/image-gallery.js

@@ -44,6 +44,7 @@ 'use strict';
       currentIndex: props.startIndex,
-      thumbsTranslateX: 0,
+      thumbsTranslate: 0,
       offsetPercentage: 0,
       galleryWidth: 0,
-      thumbnailWidth: 0,
+      thumbnailsWrapperWidth: 0,
+      thumbnailsWrapperHeight: 0,
       isFullscreen: false,
@@ -69,6 +70,4 @@ isPlaying: false
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevState.thumbnailWidth !== this.state.thumbnailWidth || prevProps.showThumbnails !== this.props.showThumbnails) {
-
-        // adjust thumbnail container when thumbnail width is adjusted
-        this._setThumbsTranslateX(-this._getThumbsTranslateX(this.state.currentIndex > 0 ? 1 : 0) * this.state.currentIndex);
+      if (prevProps.thumbnailPosition !== this.props.thumbnailPosition || prevState.thumbnailsWrapperHeight !== this.state.thumbnailsWrapperHeight || prevState.thumbnailsWrapperWidth !== this.state.thumbnailsWrapperWidth) {
+        this._handleResize();
       }
@@ -81,3 +80,3 @@
 
-        this._updateThumbnailTranslateX(prevState);
+        this._updateThumbnailTranslate(prevState);
       }
@@ -90,3 +89,3 @@ }
       this._slideRight = (0, _lodash2.default)(this._slideRight.bind(this), MIN_INTERVAL, true);
-      this._handleResize = this._handleResize.bind(this);
+      this._handleResize = (0, _lodash2.default)(this._handleResize.bind(this), MIN_INTERVAL, true);
       this._handleScreenChange = this._handleScreenChange.bind(this);
@@ -99,9 +98,4 @@ this._handleKeyDown = this._handleKeyDown.bind(this);
     value: function componentDidMount() {
-      var _this2 = this;
+      this._handleResize();
 
-      // delay initial resize to get the accurate this._imageGallery.offsetWidth
-      window.setTimeout(function () {
-        return _this2._handleResize();
-      }, 500);
-
       if (this.props.autoPlay) {
@@ -133,3 +127,3 @@ this.play();
     value: function play() {
-      var _this3 = this;
+      var _this2 = this;
 
@@ -143,7 +137,7 @@ var callback = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
         this._intervalId = window.setInterval(function () {
-          if (!_this3.state.hovering) {
-            if (!_this3.props.infinite && !_this3._canSlideRight()) {
-              _this3.pause();
+          if (!_this2.state.hovering) {
+            if (!_this2.props.infinite && !_this2._canSlideRight()) {
+              _this2.pause();
             } else {
-              _this3.slideToIndex(_this3.state.currentIndex + 1);
+              _this2.slideToIndex(_this2.state.currentIndex + 1);
             }
@@ -272,6 +266,6 @@ }
     value: function _onScreenChangeEvent() {
-      var _this4 = this;
+      var _this3 = this;
 
       screenChangeEvents.map(function (eventName) {
-        document.addEventListener(eventName, _this4._handleScreenChange);
+        document.addEventListener(eventName, _this3._handleScreenChange);
       });
@@ -282,6 +276,6 @@ }
     value: function _offScreenChangeEvent() {
-      var _this5 = this;
+      var _this4 = this;
 
       screenChangeEvents.map(function (eventName) {
-        document.removeEventListener(eventName, _this5._handleScreenChange);
+        document.removeEventListener(eventName, _this4._handleScreenChange);
       });
@@ -310,11 +304,38 @@ }
     value: function _handleResize() {
-      if (this._imageGallery) {
-        this.setState({ galleryWidth: this._imageGallery.offsetWidth });
-      }
+      var _this5 = this;
 
-      if (this._imageGalleryThumbnail) {
-        this.setState({ thumbnailWidth: this._imageGalleryThumbnail.offsetWidth });
-      }
+      // delay initial resize to get the accurate this._imageGallery height/width
+      window.setTimeout(function () {
+        if (_this5._imageGallery) {
+          _this5.setState({
+            galleryWidth: _this5._imageGallery.offsetWidth
+          });
+        }
+
+        // adjust thumbnail container when thumbnail width or height is adjusted
+        _this5._setThumbsTranslate(-_this5._getThumbsTranslate(_this5.state.currentIndex > 0 ? 1 : 0) * _this5.state.currentIndex);
+
+        if (_this5._imageGallerySlideWrapper) {
+          _this5.setState({
+            gallerySlideWrapperHeight: _this5._imageGallerySlideWrapper.offsetHeight
+          });
+        }
+
+        if (_this5._thumbnailsWrapper) {
+          if (_this5._isThumbnailHorizontal()) {
+            _this5.setState({ thumbnailsWrapperHeight: _this5._thumbnailsWrapper.offsetHeight });
+          } else {
+            _this5.setState({ thumbnailsWrapperWidth: _this5._thumbnailsWrapper.offsetWidth });
+          }
+        }
+      }, 500);
     }
   }, {
+    key: '_isThumbnailHorizontal',
+    value: function _isThumbnailHorizontal() {
+      var thumbnailPosition = this.props.thumbnailPosition;
+
+      return thumbnailPosition === 'left' || thumbnailPosition === 'right';
+    }
+  }, {
     key: '_handleKeyDown',
@@ -415,2 +436,5 @@ value: function _handleKeyDown(event) {
       var offsetPercentage = index * (delta / this.state.galleryWidth * 100);
+      if (Math.abs(offsetPercentage) >= 100) {
+        offsetPercentage = index * 100;
+      }
       this.setState({ offsetPercentage: offsetPercentage, style: {} });
@@ -434,14 +458,14 @@ }
   }, {
-    key: '_updateThumbnailTranslateX',
-    value: function _updateThumbnailTranslateX(prevState) {
+    key: '_updateThumbnailTranslate',
+    value: function _updateThumbnailTranslate(prevState) {
       if (this.state.currentIndex === 0) {
-        this._setThumbsTranslateX(0);
+        this._setThumbsTranslate(0);
       } else {
         var indexDifference = Math.abs(prevState.currentIndex - this.state.currentIndex);
-        var scrollX = this._getThumbsTranslateX(indexDifference);
-        if (scrollX > 0) {
+        var scroll = this._getThumbsTranslate(indexDifference);
+        if (scroll > 0) {
           if (prevState.currentIndex < this.state.currentIndex) {
-            this._setThumbsTranslateX(this.state.thumbsTranslateX - scrollX);
+            this._setThumbsTranslate(this.state.thumbsTranslate - scroll);
           } else if (prevState.currentIndex > this.state.currentIndex) {
-            this._setThumbsTranslateX(this.state.thumbsTranslateX + scrollX);
+            this._setThumbsTranslate(this.state.thumbsTranslate + scroll);
           }
@@ -452,9 +476,9 @@ }
   }, {
-    key: '_setThumbsTranslateX',
-    value: function _setThumbsTranslateX(thumbsTranslateX) {
-      this.setState({ thumbsTranslateX: thumbsTranslateX });
+    key: '_setThumbsTranslate',
+    value: function _setThumbsTranslate(thumbsTranslate) {
+      this.setState({ thumbsTranslate: thumbsTranslate });
     }
   }, {
-    key: '_getThumbsTranslateX',
-    value: function _getThumbsTranslateX(indexDifference) {
+    key: '_getThumbsTranslate',
+    value: function _getThumbsTranslate(indexDifference) {
       if (this.props.disableThumbnailScroll) {
@@ -464,16 +488,28 @@ return 0;
 
-      var thumbnailWidth = this.state.thumbnailWidth;
+      var _state = this.state;
+      var thumbnailsWrapperWidth = _state.thumbnailsWrapperWidth;
+      var thumbnailsWrapperHeight = _state.thumbnailsWrapperHeight;
 
+      var totalScroll = void 0;
 
       if (this._thumbnails) {
-        if (this._thumbnails.scrollWidth <= thumbnailWidth) {
-          return 0;
+
+        // total scroll required to see the last thumbnail
+        if (this._isThumbnailHorizontal()) {
+          if (this._thumbnails.scrollHeight <= thumbnailsWrapperHeight) {
+            return 0;
+          }
+          totalScroll = this._thumbnails.scrollHeight - thumbnailsWrapperHeight;
+        } else {
+          if (this._thumbnails.scrollWidth <= thumbnailsWrapperWidth) {
+            return 0;
+          }
+          totalScroll = this._thumbnails.scrollWidth - thumbnailsWrapperWidth;
         }
+
         var totalThumbnails = this._thumbnails.children.length;
-        // total scroll-x required to see the last thumbnail
-        var totalScrollX = this._thumbnails.scrollWidth - thumbnailWidth;
         // scroll-x required per index change
-        var perIndexScrollX = totalScrollX / (totalThumbnails - 1);
+        var perIndexScroll = totalScroll / (totalThumbnails - 1);
 
-        return indexDifference * perIndexScrollX;
+        return indexDifference * perIndexScroll;
       }
@@ -520,6 +556,6 @@ }
       // For taking care of infinite swipe when there are only two slides
-      var _state = this.state;
-      var currentIndex = _state.currentIndex;
-      var offsetPercentage = _state.offsetPercentage;
-      var previousIndex = _state.previousIndex;
+      var _state2 = this.state;
+      var currentIndex = _state2.currentIndex;
+      var offsetPercentage = _state2.offsetPercentage;
+      var previousIndex = _state2.previousIndex;
 
@@ -562,7 +598,17 @@ var baseTranslateX = -100 * currentIndex;
   }, {
+    key: '_getThumbnailBarHeight',
+    value: function _getThumbnailBarHeight() {
+      if (this._isThumbnailHorizontal()) {
+        return {
+          height: this.state.gallerySlideWrapperHeight
+        };
+      }
+      return {};
+    }
+  }, {
     key: '_getSlideStyle',
     value: function _getSlideStyle(index) {
-      var _state2 = this.state;
-      var currentIndex = _state2.currentIndex;
-      var offsetPercentage = _state2.offsetPercentage;
+      var _state3 = this.state;
+      var currentIndex = _state3.currentIndex;
+      var offsetPercentage = _state3.offsetPercentage;
       var _props = this.props;
@@ -617,3 +663,9 @@ var infinite = _props.infinite;
     value: function _getThumbnailStyle() {
-      var translate3d = 'translate3d(' + this.state.thumbsTranslateX + 'px, 0, 0)';
+      var translate3d = void 0;
+
+      if (this._isThumbnailHorizontal()) {
+        translate3d = 'translate3d(0, ' + this.state.thumbsTranslate + 'px, 0)';
+      } else {
+        translate3d = 'translate3d(' + this.state.thumbsTranslate + 'px, 0, 0)';
+      }
       return {
@@ -665,10 +717,11 @@ WebkitTransform: translate3d,
 
-      var _state3 = this.state;
-      var currentIndex = _state3.currentIndex;
-      var isFullscreen = _state3.isFullscreen;
-      var modalFullscreen = _state3.modalFullscreen;
-      var isPlaying = _state3.isPlaying;
+      var _state4 = this.state;
+      var currentIndex = _state4.currentIndex;
+      var isFullscreen = _state4.isFullscreen;
+      var modalFullscreen = _state4.modalFullscreen;
+      var isPlaying = _state4.isPlaying;
 
 
       var thumbnailStyle = this._getThumbnailStyle();
+      var thumbnailPosition = this.props.thumbnailPosition;
 
@@ -749,2 +802,89 @@ var slideLeft = this._slideLeft.bind(this);
 
+      var slideWrapper = _react2.default.createElement(
+        'div',
+        {
+          ref: function ref(i) {
+            return _this7._imageGallerySlideWrapper = i;
+          },
+          className: 'image-gallery-slide-wrapper ' + thumbnailPosition
+        },
+        this.props.renderCustomControls && this.props.renderCustomControls(),
+        this.props.showFullscreenButton && _react2.default.createElement('a', {
+          className: 'image-gallery-fullscreen-button' + (isFullscreen ? ' active' : ''),
+          onClick: this._toggleFullScreen.bind(this) }),
+        this.props.showPlayButton && _react2.default.createElement('a', {
+          ref: function ref(p) {
+            return _this7._playButton = p;
+          },
+          className: 'image-gallery-play-button' + (isPlaying ? ' active' : ''),
+          onClick: this._togglePlay.bind(this) }),
+        this._canNavigate() ? [this.props.showNav && _react2.default.createElement(
+          'span',
+          { key: 'navigation' },
+          _react2.default.createElement('button', {
+            type: 'button',
+            className: 'image-gallery-left-nav',
+            disabled: !this._canSlideLeft(),
+            onClick: slideLeft }),
+          _react2.default.createElement('button', {
+            type: 'button',
+            className: 'image-gallery-right-nav',
+            disabled: !this._canSlideRight(),
+            onClick: slideRight })
+        ), this.props.disableSwipe ? _react2.default.createElement(
+          'div',
+          { className: 'image-gallery-slides', key: 'slides' },
+          slides
+        ) : _react2.default.createElement(
+          _reactSwipeable2.default,
+          {
+            className: 'image-gallery-swipe',
+            key: 'swipeable',
+            delta: 1,
+            onSwipingLeft: this._handleSwiping.bind(this, -1),
+            onSwipingRight: this._handleSwiping.bind(this, 1),
+            onSwiped: this._handleOnSwiped.bind(this),
+            onSwipedLeft: this._handleOnSwipedTo.bind(this, 1),
+            onSwipedRight: this._handleOnSwipedTo.bind(this, -1)
+          },
+          _react2.default.createElement(
+            'div',
+            { className: 'image-gallery-slides' },
+            slides
+          )
+        )] : _react2.default.createElement(
+          'div',
+          { className: 'image-gallery-slides' },
+          slides
+        ),
+        this.props.showBullets && _react2.default.createElement(
+          'div',
+          { className: 'image-gallery-bullets' },
+          _react2.default.createElement(
+            'ul',
+            { className: 'image-gallery-bullets-container' },
+            bullets
+          )
+        ),
+        this.props.showIndex && _react2.default.createElement(
+          'div',
+          { className: 'image-gallery-index' },
+          _react2.default.createElement(
+            'span',
+            { className: 'image-gallery-index-current' },
+            this.state.currentIndex + 1
+          ),
+          _react2.default.createElement(
+            'span',
+            { className: 'image-gallery-index-separator' },
+            this.props.indexSeparator
+          ),
+          _react2.default.createElement(
+            'span',
+            { className: 'image-gallery-index-total' },
+            this.props.items.length
+          )
+        )
+      );
+
       return _react2.default.createElement(
@@ -756,106 +896,37 @@ 'section',
           },
-          className: 'image-gallery' + (modalFullscreen ? ' fullscreen-modal' : '') },
+          className: 'image-gallery' + (modalFullscreen ? ' fullscreen-modal' : '')
+        },
         _react2.default.createElement(
           'div',
-          { className: 'image-gallery-content' + (isFullscreen ? ' fullscreen' : '') },
-          _react2.default.createElement(
+          {
+            className: 'image-gallery-content' + (isFullscreen ? ' fullscreen' : '')
+          },
+          (thumbnailPosition === 'bottom' || thumbnailPosition === 'right') && slideWrapper,
+          this.props.showThumbnails && _react2.default.createElement(
             'div',
-            { className: 'image-gallery-slide-wrapper' },
-            this.props.renderCustomControls && this.props.renderCustomControls(),
-            this.props.showFullscreenButton && _react2.default.createElement('a', {
-              className: 'image-gallery-fullscreen-button' + (isFullscreen ? ' active' : ''),
-              onClick: this._toggleFullScreen.bind(this) }),
-            this.props.showPlayButton && _react2.default.createElement('a', {
-              ref: function ref(p) {
-                return _this7._playButton = p;
-              },
-              className: 'image-gallery-play-button' + (isPlaying ? ' active' : ''),
-              onClick: this._togglePlay.bind(this) }),
-            this._canNavigate() ? [this.props.showNav && _react2.default.createElement(
-              'span',
-              { key: 'navigation' },
-              _react2.default.createElement('button', {
-                type: 'button',
-                className: 'image-gallery-left-nav',
-                disabled: !this._canSlideLeft(),
-                onClick: slideLeft }),
-              _react2.default.createElement('button', {
-                type: 'button',
-                className: 'image-gallery-right-nav',
-                disabled: !this._canSlideRight(),
-                onClick: slideRight })
-            ), this.props.disableSwipe ? _react2.default.createElement(
+            {
+              className: 'image-gallery-thumbnails-wrapper ' + thumbnailPosition,
+              style: this._getThumbnailBarHeight()
+            },
+            _react2.default.createElement(
               'div',
-              { className: 'image-gallery-slides', key: 'slides' },
-              slides
-            ) : _react2.default.createElement(
-              _reactSwipeable2.default,
               {
-                className: 'image-gallery-swipe',
-                key: 'swipeable',
-                delta: 1,
-                onSwipingLeft: this._handleSwiping.bind(this, -1),
-                onSwipingRight: this._handleSwiping.bind(this, 1),
-                onSwiped: this._handleOnSwiped.bind(this),
-                onSwipedLeft: this._handleOnSwipedTo.bind(this, 1),
-                onSwipedRight: this._handleOnSwipedTo.bind(this, -1)
+                className: 'image-gallery-thumbnails',
+                ref: function ref(i) {
+                  return _this7._thumbnailsWrapper = i;
+                }
               },
               _react2.default.createElement(
                 'div',
-                { className: 'image-gallery-slides' },
-                slides
+                {
+                  ref: function ref(t) {
+                    return _this7._thumbnails = t;
+                  },
+                  className: 'image-gallery-thumbnails-container',
+                  style: thumbnailStyle },
+                thumbnails
               )
-            )] : _react2.default.createElement(
-              'div',
-              { className: 'image-gallery-slides' },
-              slides
-            ),
-            this.props.showBullets && _react2.default.createElement(
-              'div',
-              { className: 'image-gallery-bullets' },
-              _react2.default.createElement(
-                'ul',
-                { className: 'image-gallery-bullets-container' },
-                bullets
-              )
-            ),
-            this.props.showIndex && _react2.default.createElement(
-              'div',
-              { className: 'image-gallery-index' },
-              _react2.default.createElement(
-                'span',
-                { className: 'image-gallery-index-current' },
-                this.state.currentIndex + 1
-              ),
-              _react2.default.createElement(
-                'span',
-                { className: 'image-gallery-index-separator' },
-                this.props.indexSeparator
-              ),
-              _react2.default.createElement(
-                'span',
-                { className: 'image-gallery-index-total' },
-                this.props.items.length
-              )
             )
           ),
-          this.props.showThumbnails && _react2.default.createElement(
-            'div',
-            {
-              className: 'image-gallery-thumbnails',
-              ref: function ref(i) {
-                return _this7._imageGalleryThumbnail = i;
-              }
-            },
-            _react2.default.createElement(
-              'div',
-              {
-                ref: function ref(t) {
-                  return _this7._thumbnails = t;
-                },
-                className: 'image-gallery-thumbnails-container',
-                style: thumbnailStyle },
-              thumbnails
-            )
-          )
+          (thumbnailPosition === 'top' || thumbnailPosition === 'left') && slideWrapper
         )
@@ -886,2 +957,3 @@ );
   indexSeparator: _react2.default.PropTypes.string,
+  thumbnailPosition: _react2.default.PropTypes.string,
   startIndex: _react2.default.PropTypes.number,
@@ -916,2 +988,3 @@ slideInterval: _react2.default.PropTypes.number,
   indexSeparator: ' / ',
+  thumbnailPosition: '',
   startIndex: 0,
@@ -918,0 +991,0 @@ slideInterval: 3000

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "React Carousel, React Image gallery, React Slide Show component",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery",

README.md

@@ -98,2 +98,4 @@ React Image Gallery
 * `showThumbnails`: Boolean, default `true`
+* `thumbnailPosition`: String, default `bottom`
+  * available positions: `top, right, bottom, left`
 * `showFullscreenButton`: Boolean, default `true`
@@ -100,0 +102,0 @@ * `showPlayButton`: Boolean, default `true`

src/ImageGallery.jsx

@@ -20,6 +20,7 @@ import React from 'react';
       currentIndex: props.startIndex,
-      thumbsTranslateX: 0,
+      thumbsTranslate: 0,
       offsetPercentage: 0,
       galleryWidth: 0,
-      thumbnailWidth: 0,
+      thumbnailsWrapperWidth: 0,
+      thumbnailsWrapperHeight: 0,
       isFullscreen: false,
@@ -47,2 +48,3 @@ isPlaying: false
     indexSeparator: React.PropTypes.string,
+    thumbnailPosition: React.PropTypes.string,
     startIndex: React.PropTypes.number,
@@ -78,2 +80,3 @@ slideInterval: React.PropTypes.number,
     indexSeparator: ' / ',
+    thumbnailPosition: '',
     startIndex: 0,
@@ -94,10 +97,6 @@ slideInterval: 3000,
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.thumbnailWidth !== this.state.thumbnailWidth ||
-        prevProps.showThumbnails !== this.props.showThumbnails) {
-
-      // adjust thumbnail container when thumbnail width is adjusted
-      this._setThumbsTranslateX(
-        -this._getThumbsTranslateX(
-          this.state.currentIndex > 0 ? 1 : 0) * this.state.currentIndex);
-
+    if (prevProps.thumbnailPosition !== this.props.thumbnailPosition ||
+        prevState.thumbnailsWrapperHeight !== this.state.thumbnailsWrapperHeight ||
+        prevState.thumbnailsWrapperWidth !== this.state.thumbnailsWrapperWidth) {
+      this._handleResize();
     }
@@ -110,3 +109,3 @@
 
-      this._updateThumbnailTranslateX(prevState);
+      this._updateThumbnailTranslate(prevState);
     }
@@ -118,3 +117,3 @@ }
     this._slideRight = throttle(this._slideRight.bind(this), MIN_INTERVAL, true);
-    this._handleResize = this._handleResize.bind(this);
+    this._handleResize = throttle(this._handleResize.bind(this), MIN_INTERVAL, true);
     this._handleScreenChange = this._handleScreenChange.bind(this);
@@ -126,4 +125,3 @@ this._handleKeyDown = this._handleKeyDown.bind(this);
   componentDidMount() {
-    // delay initial resize to get the accurate this._imageGallery.offsetWidth
-    window.setTimeout(() => this._handleResize(), 500);
+    this._handleResize();
 
@@ -311,11 +309,36 @@ if (this.props.autoPlay) {
   _handleResize() {
-    if (this._imageGallery) {
-      this.setState({galleryWidth: this._imageGallery.offsetWidth});
-    }
+    // delay initial resize to get the accurate this._imageGallery height/width
+    window.setTimeout(() => {
+      if (this._imageGallery) {
+        this.setState({
+          galleryWidth: this._imageGallery.offsetWidth
+        });
+      }
 
-    if (this._imageGalleryThumbnail) {
-      this.setState({thumbnailWidth: this._imageGalleryThumbnail.offsetWidth});
-    }
+      // adjust thumbnail container when thumbnail width or height is adjusted
+      this._setThumbsTranslate(
+        -this._getThumbsTranslate(
+          this.state.currentIndex > 0 ? 1 : 0) * this.state.currentIndex);
+
+      if (this._imageGallerySlideWrapper) {
+        this.setState({
+          gallerySlideWrapperHeight: this._imageGallerySlideWrapper.offsetHeight
+        });
+      }
+
+      if (this._thumbnailsWrapper) {
+        if (this._isThumbnailHorizontal()) {
+          this.setState({thumbnailsWrapperHeight: this._thumbnailsWrapper.offsetHeight});
+        } else {
+          this.setState({thumbnailsWrapperWidth: this._thumbnailsWrapper.offsetWidth});
+        }
+      }
+    }, 500);
   }
 
+  _isThumbnailHorizontal() {
+    const { thumbnailPosition } = this.props;
+    return thumbnailPosition === 'left' || thumbnailPosition === 'right';
+  }
+
   _handleKeyDown(event) {
@@ -407,3 +430,6 @@ const LEFT_ARROW = 37;
   _handleSwiping(index, _, delta) {
-    const offsetPercentage = index * (delta / this.state.galleryWidth * 100);
+    let offsetPercentage = index * (delta / this.state.galleryWidth * 100);
+    if (Math.abs(offsetPercentage) >= 100) {
+      offsetPercentage = index * 100;
+    }
     this.setState({offsetPercentage: offsetPercentage, style: {}});
@@ -425,16 +451,16 @@ }
 
-  _updateThumbnailTranslateX(prevState) {
+  _updateThumbnailTranslate(prevState) {
     if (this.state.currentIndex === 0) {
-      this._setThumbsTranslateX(0);
+      this._setThumbsTranslate(0);
     } else {
       let indexDifference = Math.abs(
         prevState.currentIndex - this.state.currentIndex);
-      let scrollX = this._getThumbsTranslateX(indexDifference);
-      if (scrollX > 0) {
+      let scroll = this._getThumbsTranslate(indexDifference);
+      if (scroll > 0) {
         if (prevState.currentIndex < this.state.currentIndex) {
-          this._setThumbsTranslateX(
-            this.state.thumbsTranslateX - scrollX);
+          this._setThumbsTranslate(
+            this.state.thumbsTranslate - scroll);
         } else if (prevState.currentIndex > this.state.currentIndex) {
-          this._setThumbsTranslateX(
-            this.state.thumbsTranslateX + scrollX);
+          this._setThumbsTranslate(
+            this.state.thumbsTranslate + scroll);
         }
@@ -445,7 +471,7 @@ }
 
-  _setThumbsTranslateX(thumbsTranslateX) {
-    this.setState({thumbsTranslateX});
+  _setThumbsTranslate(thumbsTranslate) {
+    this.setState({thumbsTranslate});
   }
 
-  _getThumbsTranslateX(indexDifference) {
+  _getThumbsTranslate(indexDifference) {
     if (this.props.disableThumbnailScroll) {
@@ -455,15 +481,26 @@ return 0;
 
-    const {thumbnailWidth} = this.state;
+    const {thumbnailsWrapperWidth, thumbnailsWrapperHeight} = this.state;
+    let totalScroll;
 
     if (this._thumbnails) {
-      if (this._thumbnails.scrollWidth <= thumbnailWidth) {
-        return 0;
+
+      // total scroll required to see the last thumbnail
+      if (this._isThumbnailHorizontal()) {
+        if (this._thumbnails.scrollHeight <= thumbnailsWrapperHeight) {
+          return 0;
+        }
+        totalScroll = this._thumbnails.scrollHeight - thumbnailsWrapperHeight;
+      } else {
+        if (this._thumbnails.scrollWidth <= thumbnailsWrapperWidth) {
+          return 0;
+        }
+        totalScroll = this._thumbnails.scrollWidth - thumbnailsWrapperWidth;
       }
+
       let totalThumbnails = this._thumbnails.children.length;
-      // total scroll-x required to see the last thumbnail
-      let totalScrollX = this._thumbnails.scrollWidth - thumbnailWidth;
       // scroll-x required per index change
-      let perIndexScrollX = totalScrollX / (totalThumbnails - 1);
+      let perIndexScroll = totalScroll / (totalThumbnails - 1);
 
-      return indexDifference * perIndexScrollX;
+      return indexDifference * perIndexScroll;
+
     }
@@ -548,2 +585,11 @@ }
 
+  _getThumbnailBarHeight() {
+    if (this._isThumbnailHorizontal()) {
+      return {
+        height: this.state.gallerySlideWrapperHeight
+      };
+    }
+    return {};
+  }
+
   _getSlideStyle(index) {
@@ -596,3 +642,9 @@ const {currentIndex, offsetPercentage} = this.state;
   _getThumbnailStyle() {
-    const translate3d = `translate3d(${this.state.thumbsTranslateX}px, 0, 0)`;
+    let translate3d;
+
+    if (this._isThumbnailHorizontal()) {
+      translate3d = `translate3d(0, ${this.state.thumbsTranslate}px, 0)`;
+    } else {
+      translate3d = `translate3d(${this.state.thumbsTranslate}px, 0, 0)`;
+    }
     return {
@@ -647,2 +699,3 @@ WebkitTransform: translate3d,
     const thumbnailStyle = this._getThumbnailStyle();
+    const thumbnailPosition = this.props.thumbnailPosition;
 
@@ -729,111 +782,133 @@ const slideLeft = this._slideLeft.bind(this);
 
-    return (
-      <section
-        ref={i => this._imageGallery = i}
-        className={
-          `image-gallery${modalFullscreen ? ' fullscreen-modal' : ''}`}>
+    const slideWrapper = (
+      <div
+        ref={i => this._imageGallerySlideWrapper = i}
+        className={`image-gallery-slide-wrapper ${thumbnailPosition}`}
+      >
 
-        <div className={`image-gallery-content${isFullscreen ? ' fullscreen' : ''}`}>
-          <div className='image-gallery-slide-wrapper'>
+        {this.props.renderCustomControls && this.props.renderCustomControls()}
 
-            {this.props.renderCustomControls && this.props.renderCustomControls()}
+        {
+          this.props.showFullscreenButton &&
+            <a
+              className={
+                `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`}
+              onClick={this._toggleFullScreen.bind(this)}/>
+        }
 
-            {
-              this.props.showFullscreenButton &&
-                <a
-                  className={
-                    `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`}
-                  onClick={this._toggleFullScreen.bind(this)}/>
-            }
+        {
+          this.props.showPlayButton &&
+            <a
+              ref={p => this._playButton = p}
+              className={
+                `image-gallery-play-button${isPlaying ? ' active' : ''}`}
+              onClick={this._togglePlay.bind(this)}/>
+        }
 
-            {
-              this.props.showPlayButton &&
-                <a
-                  ref={p => this._playButton = p}
-                  className={
-                    `image-gallery-play-button${isPlaying ? ' active' : ''}`}
-                  onClick={this._togglePlay.bind(this)}/>
-            }
+        {
+          this._canNavigate() ?
+            [
+              this.props.showNav &&
+                <span key='navigation'>
+                  <button
+                    type='button'
+                    className='image-gallery-left-nav'
+                    disabled={!this._canSlideLeft()}
+                    onClick={slideLeft}/>
 
-            {
-              this._canNavigate() ?
-                [
-                  this.props.showNav &&
-                    <span key='navigation'>
-                      <button
-                        type='button'
-                        className='image-gallery-left-nav'
-                        disabled={!this._canSlideLeft()}
-                        onClick={slideLeft}/>
+                  <button
+                    type='button'
+                    className='image-gallery-right-nav'
+                    disabled={!this._canSlideRight()}
+                    onClick={slideRight}/>
+                </span>,
 
-                      <button
-                        type='button'
-                        className='image-gallery-right-nav'
-                        disabled={!this._canSlideRight()}
-                        onClick={slideRight}/>
-                    </span>,
+                this.props.disableSwipe ?
+                  <div className='image-gallery-slides' key='slides'>
+                    {slides}
+                  </div>
+                :
+                  <Swipeable
+                    className='image-gallery-swipe'
+                    key='swipeable'
+                    delta={1}
+                    onSwipingLeft={this._handleSwiping.bind(this, -1)}
+                    onSwipingRight={this._handleSwiping.bind(this, 1)}
+                    onSwiped={this._handleOnSwiped.bind(this)}
+                    onSwipedLeft={this._handleOnSwipedTo.bind(this, 1)}
+                    onSwipedRight={this._handleOnSwipedTo.bind(this, -1)}
+                  >
+                    <div className='image-gallery-slides'>
+                      {slides}
+                    </div>
+                </Swipeable>
+            ]
+          :
+            <div className='image-gallery-slides'>
+              {slides}
+            </div>
+        }
+        {
+          this.props.showBullets &&
+            <div className='image-gallery-bullets'>
+              <ul className='image-gallery-bullets-container'>
+                {bullets}
+              </ul>
+            </div>
+        }
+        {
+          this.props.showIndex &&
+            <div className='image-gallery-index'>
+              <span className='image-gallery-index-current'>
+                {this.state.currentIndex + 1}
+              </span>
+              <span className='image-gallery-index-separator'>
+                {this.props.indexSeparator}
+              </span>
+              <span className='image-gallery-index-total'>
+                {this.props.items.length}
+              </span>
+            </div>
+        }
+      </div>
+    );
 
-                    this.props.disableSwipe ?
-                      <div className='image-gallery-slides' key='slides'>
-                        {slides}
-                      </div>
-                    :
-                      <Swipeable
-                        className='image-gallery-swipe'
-                        key='swipeable'
-                        delta={1}
-                        onSwipingLeft={this._handleSwiping.bind(this, -1)}
-                        onSwipingRight={this._handleSwiping.bind(this, 1)}
-                        onSwiped={this._handleOnSwiped.bind(this)}
-                        onSwipedLeft={this._handleOnSwipedTo.bind(this, 1)}
-                        onSwipedRight={this._handleOnSwipedTo.bind(this, -1)}
-                      >
-                        <div className='image-gallery-slides'>
-                          {slides}
-                        </div>
-                    </Swipeable>
-                ]
-              :
-                <div className='image-gallery-slides'>
-                  {slides}
-                </div>
-            }
-            {
-              this.props.showBullets &&
-                <div className='image-gallery-bullets'>
-                  <ul className='image-gallery-bullets-container'>
-                    {bullets}
-                  </ul>
-                </div>
-            }
-            {
-              this.props.showIndex &&
-                <div className='image-gallery-index'>
-                  <span className='image-gallery-index-current'>
-                    {this.state.currentIndex + 1}
-                  </span>
-                  <span className='image-gallery-index-separator'>
-                    {this.props.indexSeparator}
-                  </span>
-                  <span className='image-gallery-index-total'>
-                    {this.props.items.length}
-                  </span>
-                </div>
-            }
-          </div>
+    return (
+      <section
+        ref={i => this._imageGallery = i}
+        className={
+          `image-gallery${modalFullscreen ? ' fullscreen-modal' : ''}`}
+      >
 
+        <div
+          className={`image-gallery-content${isFullscreen ? ' fullscreen' : ''}`}
+        >
+
           {
+            (thumbnailPosition === 'bottom' || thumbnailPosition === 'right') &&
+              slideWrapper
+          }
+          {
             this.props.showThumbnails &&
               <div
-                className='image-gallery-thumbnails'
-                ref={i => this._imageGalleryThumbnail = i}
+                className={`image-gallery-thumbnails-wrapper ${thumbnailPosition}`}
+                style={this._getThumbnailBarHeight()}
               >
                 <div
-                  ref={t => this._thumbnails = t}
-                  className='image-gallery-thumbnails-container'
-                  style={thumbnailStyle}>
-                  {thumbnails}
+                  className='image-gallery-thumbnails'
+                  ref={i => this._thumbnailsWrapper = i}
+                >
+                  <div
+                    ref={t => this._thumbnails = t}
+                    className='image-gallery-thumbnails-container'
+                    style={thumbnailStyle}>
+                    {thumbnails}
+                  </div>
                 </div>
               </div>
           }
+          {
+            (thumbnailPosition === 'top' || thumbnailPosition === 'left') &&
+              slideWrapper
+          }
 
@@ -840,0 +915,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

92709

increased by7.99%

Lines of code

2167

increased by8.68%

Number of lines in readme file

190

increased by1.06%

No dependency changes