react-image-gallery - npm Package Compare versions

Comparing version 0.5.9 to 0.5.10

build/image-gallery.js

@@ -35,3 +35,4 @@ 'use strict';
     defaultImage: _react2['default'].PropTypes.string,
-    disableScrolling: _react2['default'].PropTypes.bool,
+    disableThumbnailScroll: _react2['default'].PropTypes.bool,
+    slideOnThumbnailHover: _react2['default'].PropTypes.bool,
     server: _react2['default'].PropTypes.bool
@@ -44,11 +45,12 @@ },
       showThumbnails: true,
+      showNav: true,
       showBullets: false,
-      showNav: true,
       showIndex: false,
       indexSeparator: ' / ',
       autoPlay: false,
+      disableThumbnailScroll: false,
+      server: false,
+      slideOnThumbnailHover: false,
       slideInterval: 4000,
-      startIndex: 0,
-      disableScrolling: false,
-      server: false
+      startIndex: 0
     };
@@ -164,11 +166,13 @@ },
 
-    return function (event) {
-      if (_this2._preventGhostClick === true) {
-        return;
-      }
-      func(event);
-    };
+    if (typeof func === 'function') {
+      return function (event) {
+        if (_this2._preventGhostClick === true) {
+          return;
+        }
+        func(event);
+      };
+    }
   },
 
-  _touchEnd: function _touchEnd(event) {
+  _touchEnd: function _touchEnd() {
     var _this3 = this;
@@ -192,3 +196,3 @@
   _getScrollX: function _getScrollX(indexDifference) {
-    if (this.props.disableScrolling) {
+    if (this.props.disableThumbnailScroll) {
       return 0;
@@ -213,14 +217,16 @@ }
 
-  _handleMouseOverThumbnails: function _handleMouseOverThumbnails(index, event) {
+  _handleMouseOverThumbnails: function _handleMouseOverThumbnails(index) {
     var _this4 = this;
 
-    this.setState({ hovering: true });
-    if (this._thumbnailTimer) {
-      window.clearTimeout(this._thumbnailTimer);
-      this._thumbnailTimer = null;
+    if (this.props.slideOnThumbnailHover) {
+      this.setState({ hovering: true });
+      if (this._thumbnailTimer) {
+        window.clearTimeout(this._thumbnailTimer);
+        this._thumbnailTimer = null;
+      }
+      this._thumbnailTimer = window.setTimeout(function () {
+        _this4.slideToIndex(index);
+        _this4.pause();
+      }, this._thumbnailDelay);
     }
-    this._thumbnailTimer = window.setTimeout(function () {
-      _this4.slideToIndex(index);
-      _this4.pause();
-    }, this._thumbnailDelay);
   },
@@ -276,2 +282,4 @@
   _handleImageLoad: function _handleImageLoad(event) {
+    // slide images have an opacity of 0, onLoad the class 'loaded' is added
+    // so that it transitions smoothly when navigating to non adjacent slides
     if (event.target.className.indexOf('loaded') === -1) {
@@ -318,3 +326,3 @@ event.target.className += ' loaded';
         _react2['default'].createElement('img', {
-          className: _this5.props.server && 'loaded',
+          className: _this5.props.server ? 'loaded' : null,
           src: item.original,
@@ -338,3 +346,4 @@ alt: item.originalAlt,
           'a',
-          { onMouseOver: _this5._handleMouseOverThumbnails.bind(_this5, index),
+          {
+            onMouseOver: _this5._handleMouseOverThumbnails.bind(_this5, index),
             onMouseLeave: _this5._handleMouseLeaveThumbnails.bind(_this5, index),
@@ -341,0 +350,0 @@ key: index,

example/app.js

@@ -1,9 +0,7 @@
-'use strict';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import LinkedStateMixin from 'react-addons-linked-state-mixin'
 
-import React from 'react';
-import ReactDOM from 'react-dom';
-import LinkedStateMixin from 'react-addons-linked-state-mixin';
+import ImageGallery from '../src/ImageGallery.react'
 
-import ImageGallery from '../src/ImageGallery.react';
-
 const App = React.createClass({
@@ -16,8 +14,9 @@
       isPlaying: false,
-      slideInterval: 4000,
+      showIndex: false,
+      slideOnThumbnailHover: false,
+      showBullets: true,
       showThumbnails: true,
-      showIndex: false,
       showNav: true,
-      showBullets: true
-    };
+      slideInterval: 4000
+    }
   },
@@ -28,4 +27,4 @@
       // refresh setInterval
-      this._pauseSlider();
-      this._playSlider();
+      this._pauseSlider()
+      this._playSlider()
     }
@@ -36,4 +35,4 @@ },
     if (this._imageGallery) {
-      this._imageGallery.pause();
-      this.setState({isPlaying: false});
+      this._imageGallery.pause()
+      this.setState({isPlaying: false})
     }
@@ -44,4 +43,4 @@ },
     if (this._imageGallery) {
-      this._imageGallery.play();
-      this.setState({isPlaying: true});
+      this._imageGallery.play()
+      this.setState({isPlaying: true})
     }
@@ -84,3 +83,3 @@ },
       }
-    ];
+    ]
 
@@ -100,2 +99,3 @@ return (
           autoPlay={this.state.isPlaying}
+          slideOnThumbnailHover={this.state.slideOnThumbnailHover}
         />
@@ -105,3 +105,3 @@
 
-          <h2> Playground </h2>
+          <h2> Available Props </h2>
 
@@ -124,3 +124,3 @@ <ul>
             <li>
-              <div>Slide interval</div>
+              <div>slide interval</div>
               <input
@@ -133,24 +133,35 @@ type='text'
               <input
+                id='show_bullets'
                 type='checkbox'
                 checkedLink={this.linkState('showBullets')}/>
-                show bullets?
+                <label htmlFor='show_bullets'>show bullets?</label>
             </li>
             <li>
               <input
+                id='show_thumbnails'
                 type='checkbox'
                 checkedLink={this.linkState('showThumbnails')}/>
-                show Thumbnails?
+                <label htmlFor='show_thumbnails'>show thumbnails?</label>
             </li>
             <li>
               <input
+                id='show_navigation'
                 type='checkbox'
                 checkedLink={this.linkState('showNav')}/>
-                show Navigation?
+                <label htmlFor='show_navigation'>show navigation?</label>
             </li>
             <li>
               <input
+                id='show_index'
                 type='checkbox'
                 checkedLink={this.linkState('showIndex')}/>
-                show Index?
+                <label htmlFor='show_index'>show index?</label>
             </li>
+            <li>
+              <input
+                id='slide_on_thumbnail_hover'
+                type='checkbox'
+                checkedLink={this.linkState('slideOnThumbnailHover')}/>
+                <label htmlFor='slide_on_thumbnail_hover'>slide on thumbnail hover?</label>
+            </li>
           </ul>
@@ -160,10 +171,8 @@
       </section>
-    );
+    )
   }
 
-});
+})
 
+ReactDOM.render(<App/>, document.getElementById('container'))
 
-(function() {
-  ReactDOM.render(<App/>, document.getElementById('container'));
-})();

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "description": "Image gallery component for React.JS",
   "main": "./build/image-gallery",
   "scripts": {
-    "start": "gulp dev"
+    "start": "gulp dev",
+    "publish": "gulp build; npm publish ."
   },
@@ -16,5 +17,5 @@ "repository": {
     "react-component",
-    "react caoursel",
-    "react slideshow",
-    "react gallery",
+    "react-carousel",
+    "react-slideshow",
+    "react-gallery",
     "image gallery",
@@ -21,0 +22,0 @@ "image slider",

README.md

@@ -90,15 +90,20 @@ # react-image-gallery
 
-* `items`: (required) Array of images,
+* `items`: (required) Array of objects, see example above,
 * `lazyLoad`: Boolean, default `true`
+* `showNav`: Boolean, default `true`
 * `showThumbnails`: Boolean, default `true`
-* `showNav`: Boolean, default `true`
 * `showBullets`: Boolean, default `false`
 * `showIndex`: Boolean, default `false`
 * `server`: Boolean, default `false`
+  * adds `loaded` class to all slide `<img>`
+* `autoPlay`: Boolean, default `false`
+* `disableThumbnailScroll`: Boolean, default `false`
+  * disables the thumbnail container from adjusting
+* `slideOnThumbnailHover`: Boolean, default `false`
+  * slides to the currently hovered thumbnail
+* `defaultImage`: String, default `undefined`
+  * an image src pointing to your default image if an image fails to load
 * `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false
-* `autoPlay`: Boolean, default `false`
 * `slideInterval`: Integer, default `4000`
 * `startIndex`: Integer, default `0`
-* `defaultImage`: String, default `undefined`
-* `disableScrolling`: Boolean, default `false`
 * `onSlide`: Function, `callback(index)`
@@ -105,0 +110,0 @@ * `onClick`: Function, `callback(event)`

src/ImageGallery.react.jsx

@@ -22,3 +22,4 @@ import React from 'react'
     defaultImage: React.PropTypes.string,
-    disableScrolling: React.PropTypes.bool,
+    disableThumbnailScroll: React.PropTypes.bool,
+    slideOnThumbnailHover: React.PropTypes.bool,
     server: React.PropTypes.bool
@@ -31,11 +32,12 @@ },
       showThumbnails: true,
+      showNav: true,
       showBullets: false,
-      showNav: true,
       showIndex: false,
       indexSeparator: ' / ',
       autoPlay: false,
+      disableThumbnailScroll: false,
+      server: false,
+      slideOnThumbnailHover: false,
       slideInterval: 4000,
-      startIndex: 0,
-      disableScrolling: false,
-      server: false
+      startIndex: 0
     }
@@ -155,11 +157,13 @@ },
   _wrapClick(func) {
-    return event => {
-      if (this._preventGhostClick === true) {
-        return
+    if (typeof func === 'function') {
+      return event => {
+        if (this._preventGhostClick === true) {
+          return
+        }
+        func(event)
       }
-      func(event)
     }
   },
 
-  _touchEnd(event) {
+  _touchEnd() {
     this._preventGhostClick = true
@@ -181,3 +185,3 @@ this._preventGhostClickTimer = window.setTimeout(() => {
   _getScrollX(indexDifference) {
-    if (this.props.disableScrolling) {
+    if (this.props.disableThumbnailScroll) {
       return 0
@@ -202,12 +206,14 @@ }
 
-  _handleMouseOverThumbnails(index, event) {
-    this.setState({hovering: true})
-    if (this._thumbnailTimer) {
-      window.clearTimeout(this._thumbnailTimer)
-      this._thumbnailTimer = null
+  _handleMouseOverThumbnails(index) {
+    if (this.props.slideOnThumbnailHover) {
+      this.setState({hovering: true})
+      if (this._thumbnailTimer) {
+        window.clearTimeout(this._thumbnailTimer)
+        this._thumbnailTimer = null
+      }
+      this._thumbnailTimer = window.setTimeout(() => {
+        this.slideToIndex(index)
+        this.pause()
+      }, this._thumbnailDelay)
     }
-    this._thumbnailTimer = window.setTimeout(() => {
-      this.slideToIndex(index)
-      this.pause()
-    }, this._thumbnailDelay)
   },
@@ -263,2 +269,4 @@
   _handleImageLoad(event) {
+    // slide images have an opacity of 0, onLoad the class 'loaded' is added
+    // so that it transitions smoothly when navigating to non adjacent slides
     if (event.target.className.indexOf('loaded') === -1) {
@@ -302,3 +310,3 @@ event.target.className += ' loaded'
             <img
-              className={(this.props.server && 'loaded')}
+              className={this.props.server ? 'loaded' : null}
               src={item.original}
@@ -322,4 +330,5 @@ alt={item.originalAlt}
         thumbnails.push(
-          <a onMouseOver={this._handleMouseOverThumbnails.bind(this, index)}
-             onMouseLeave={this._handleMouseLeaveThumbnails.bind(this, index)}
+          <a
+            onMouseOver={this._handleMouseOverThumbnails.bind(this, index)}
+            onMouseLeave={this._handleMouseLeaveThumbnails.bind(this, index)}
             key={index}
@@ -326,0 +335,0 @@ className={

No alert changes

Improved metrics

Total package byte prevSize

286403

increased by0.92%

Lines of code

2066

increased by1.32%

Number of lines in readme file

125

increased by4.17%

No dependency changes