react-image-gallery - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

build/image-gallery.js

@@ -5,2 +5,3 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ImageGallery = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 var React = require('react/addons');
+var Swipeable = require('react-swipeable');
 
@@ -18,2 +19,3 @@ var ImageGallery = React.createClass({
     autoPlay: React.PropTypes.bool,
+    lazyLoad: React.PropTypes.bool,
     slideInterval: React.PropTypes.number,
@@ -25,2 +27,3 @@ onSlide: React.PropTypes.func
     return {
+      lazyLoad: true,
       showThumbnails: true,
@@ -212,3 +215,13 @@ showBullets: false,
       var alignment = this._getAlignment(index);
-      if (alignment) {
+      if (this.props.lazyLoad) {
+        if (alignment) {
+          slides.push(
+            React.createElement("div", {
+              key: index, 
+              className: 'image-gallery-slide ' + alignment}, 
+              React.createElement("img", {src: item.original})
+            )
+          );
+        }
+      } else {
         slides.push(
@@ -270,4 +283,8 @@ React.createElement("div", {
 
-          React.createElement("div", {className: "image-gallery-slides"}, 
-            slides
+          React.createElement(Swipeable, {
+            onSwipedLeft: this.slideToIndex.bind(this, currentIndex + 1), 
+            onSwipedRight: this.slideToIndex.bind(this, currentIndex - 1)}, 
+              React.createElement("div", {className: "image-gallery-slides"}, 
+                slides
+              )
           ), 
@@ -306,3 +323,3 @@
 
-},{"react/addons":"react/addons"}]},{},[1])(1)
+},{"react-swipeable":"react-swipeable","react/addons":"react/addons"}]},{},[1])(1)
 });

example/app.js

@@ -84,2 +84,3 @@ 'use strict';
           items={images}
+          lazyLoad={false}
           showBullets={this.state.showBullets}
@@ -86,0 +87,0 @@ showThumbnails={this.state.showThumbnails}

gulpfile.js

@@ -54,3 +54,3 @@ 'use strict';
   })
-    .external('react/addons')
+    .external(['react/addons', 'react-swipeable'])
     .bundle()
@@ -57,0 +57,0 @@ .on('error', swallowError)

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Image gallery component for React.JS",
@@ -39,3 +39,6 @@ "main": "./build/image-gallery",
     "watchify": "^2.4.0"
+  },
+  "dependencies": {
+    "react-swipeable": "^3.0.2"
   }
 }

README.md

@@ -86,2 +86,3 @@ # react-image-gallery
 * `items`: (required) Array of images,
+* `lazyLoad`: Boolean, default `true`
 * `showThumbnails`: Boolean, default `true`
@@ -88,0 +89,0 @@ * `showBullets`: Boolean, default `false`

src/ImageGallery.react.jsx

 'use strict';
 
 var React = require('react/addons');
+var Swipeable = require('react-swipeable');
 
@@ -16,2 +17,3 @@ var ImageGallery = React.createClass({
     autoPlay: React.PropTypes.bool,
+    lazyLoad: React.PropTypes.bool,
     slideInterval: React.PropTypes.number,
@@ -23,2 +25,3 @@ onSlide: React.PropTypes.func
     return {
+      lazyLoad: true,
       showThumbnails: true,
@@ -210,3 +213,13 @@ showBullets: false,
       var alignment = this._getAlignment(index);
-      if (alignment) {
+      if (this.props.lazyLoad) {
+        if (alignment) {
+          slides.push(
+            <div
+              key={index}
+              className={'image-gallery-slide ' + alignment}>
+              <img src={item.original}/>
+            </div>
+          );
+        }
+      } else {
         slides.push(
@@ -268,5 +281,9 @@ <div
 
-          <div className='image-gallery-slides'>
-            {slides}
-          </div>
+          <Swipeable
+            onSwipedLeft={this.slideToIndex.bind(this, currentIndex + 1)}
+            onSwipedRight={this.slideToIndex.bind(this, currentIndex - 1)}>
+              <div className='image-gallery-slides'>
+                {slides}
+              </div>
+          </Swipeable>
 
@@ -273,0 +290,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

36083

increased by4.13%

Lines of code

883

increased by4.13%

Number of lines in readme file

107

increased by0.94%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedreact-swipeable@^3.0.2

• + Addedreact@19.0.0(transitive)

• + Addedreact-swipeable@3.9.2(transitive)