react-image-gallery - npm Package Compare versions

Comparing version 0.5.6 to 0.5.7

build/image-gallery.js

@@ -34,3 +34,4 @@ 'use strict';
     startIndex: _react2['default'].PropTypes.number,
-    defaultImage: _react2['default'].PropTypes.string
+    defaultImage: _react2['default'].PropTypes.string,
+    server: _react2['default'].PropTypes.bool
   },
@@ -48,3 +49,4 @@
       slideInterval: 4000,
-      startIndex: 0
+      startIndex: 0,
+      server: false
     };
@@ -97,3 +99,3 @@ },
   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (nextProps.items.length) {
+    if (this.props.items.length !== nextProps.items.length) {
       var startIndex = nextProps.startIndex || 0;
@@ -109,16 +111,7 @@ this.setState({ currentIndex: startIndex });
     }
-    if (window.addEventListener) {
-      window.addEventListener('resize', this._handleResize);
-    } else if (window.attachEvent) {
-      window.attachEvent('onresize', this._handleResize);
-    }
+    window.addEventListener('resize', this._handleResize);
   },
 
   componentWillUnmount: function componentWillUnmount() {
-    if (window.removeEventListener) {
-      window.removeEventListener('resize', this._handleResize);
-    } else if (window.detachEvent) {
-      window.detachEvent('onresize', this._handleResize);
-    }
-
+    window.removeEventListener('resize', this._handleResize);
     if (this._intervalId) {
@@ -272,3 +265,8 @@ window.clearInterval(this._intervalId);
           onTouchStart: _this2.props.onClick },
-        _react2['default'].createElement('img', { src: item.original, onLoad: _this2._handleImageLoad, onError: _this2._handleImageError }),
+        _react2['default'].createElement('img', {
+          className: _this2.props.server && 'loaded',
+          src: item.original,
+          alt: item.originalAlt,
+          onLoad: _this2._handleImageLoad,
+          onError: _this2._handleImageError }),
         item.description
@@ -294,3 +292,6 @@ );
             onClick: _this2.slideToIndex.bind(_this2, index) },
-          _react2['default'].createElement('img', { src: item.thumbnail, onError: _this2._handleImageError })
+          _react2['default'].createElement('img', {
+            src: item.thumbnail,
+            alt: item.thumbnailAlt,
+            onError: _this2._handleImageError })
         ));
@@ -297,0 +298,0 @@ }

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "Image gallery component for React.JS",
@@ -38,3 +38,3 @@ "main": "./build/image-gallery",
     "gulp-rename": "^1.2.0",
-    "gulp-sass": "^1.3.3",
+    "gulp-sass": "^2.1.1",
     "gulp-streamify": "^1.0.0",
@@ -41,0 +41,0 @@ "gulp-uglify": "^1.2.0",

README.md

@@ -58,2 +58,4 @@ # react-image-gallery
     thumbnailClass: 'featured-thumb',
+    originalAlt: 'original-alt',
+    thumbnailAlt: 'thumbnail-alt',
     description: 'Optional description...'
@@ -95,2 +97,3 @@ },
 * `showIndex`: Boolean, default `false`
+* `server`: Boolean, default `false`
 * `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false
@@ -100,2 +103,3 @@ * `autoPlay`: Boolean, default `false`
 * `startIndex`: Integer, default `0`
+* `defaultImage`: String, default `undefined`
 * `onSlide`: Function, `callback(index)`
@@ -102,0 +106,0 @@ * `onClick`: Function, `callback(event)`

src/ImageGallery.react.jsx

@@ -23,3 +23,4 @@ 'use strict';
     startIndex: React.PropTypes.number,
-    defaultImage: React.PropTypes.string
+    defaultImage: React.PropTypes.string,
+    server: React.PropTypes.bool
   },
@@ -37,3 +38,4 @@
       slideInterval: 4000,
-      startIndex: 0
+      startIndex: 0,
+      server: false
     };
@@ -94,3 +96,3 @@ },
   componentWillReceiveProps(nextProps) {
-    if (nextProps.items.length) {
+    if (this.props.items.length !== nextProps.items.length) {
       const startIndex = nextProps.startIndex || 0;
@@ -106,16 +108,7 @@ this.setState({ currentIndex: startIndex });
     }
-    if (window.addEventListener) {
-      window.addEventListener('resize', this._handleResize);
-    } else if (window.attachEvent) {
-      window.attachEvent('onresize', this._handleResize);
-    }
+    window.addEventListener('resize', this._handleResize);
   },
 
   componentWillUnmount() {
-    if (window.removeEventListener) {
-      window.removeEventListener('resize', this._handleResize);
-    } else if (window.detachEvent) {
-      window.detachEvent('onresize', this._handleResize);
-    }
-
+    window.removeEventListener('resize', this._handleResize);
     if (this._intervalId) {
@@ -264,3 +257,8 @@ window.clearInterval(this._intervalId);
           onTouchStart={this.props.onClick}>
-            <img src={item.original} onLoad={this._handleImageLoad} onError={this._handleImageError}/>
+            <img
+              className={(this.props.server && 'loaded')}
+              src={item.original}
+              alt={item.originalAlt}
+              onLoad={this._handleImageLoad}
+              onError={this._handleImageError}/>
             {item.description}
@@ -291,3 +289,6 @@ </div>
 
-            <img src={item.thumbnail} onError={this._handleImageError}/>
+            <img
+              src={item.thumbnail}
+              alt={item.thumbnailAlt}
+              onError={this._handleImageError}/>
           </a>
@@ -294,0 +295,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

279521

0.11%

Lines of code

1947

0.41%

Number of lines in readme file

119

3.48%

No dependency changes