Mobile swipe + more

xiaolin · Apr 23, 2016 · 2970efa · 2970efa
1 parent c984b60
commit 2970efa
Show file tree

Hide file tree

Showing 11 changed files with 896 additions and 585 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,5 +3,6 @@ npm-debug.log
 .DS_Store
 
 build/
+example/example.gif
 example/example.js
 example/example.js.map
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+example/
diff --git a/README.md b/README.md
@@ -2,15 +2,16 @@ React Image Gallery
 ===
 
 [![npm version](https://badge.fury.io/js/react-image-gallery.svg)](https://badge.fury.io/js/react-image-gallery)
+[![Download Count](http://img.shields.io/npm/dm/react-swipe.svg?style=flat)](http://www.npmjs.com/package/react-image-gallery)
 
-![](https://raw.githubusercontent.com/xiaolin/linxtion.github.io/master/static/img/react-image-gallery.png)
+![http://i.imgur.com/bxa4s9f.gif](http://i.imgur.com/bxa4s9f.gif)
 
-React image gallery is a React component for building image carousels
+React image gallery is a React component for building image gallery and carousels
 
 Features of `react-image-gallery`
-* Responsive design
-* Thumbnail navigation
 * Mobile friendly
+* Thumbnail navigation
+* Responsive design
 
 ## Demo & Examples
 Live demo: [`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
@@ -24,7 +25,7 @@ npm install react-image-gallery
 ### SASS
 
 ```
-@import "../node_modules/react-image-gallery/src/ImageGallery";
+@import "../node_modules/react-image-gallery/src/image-gallery";
 ```
 
 ### CSS
@@ -33,57 +34,73 @@ npm install react-image-gallery
 build/image-gallery.css
 ```
 
-### JSX
-
+### EXAMPLE
+Need more example? See example/app.js
 ```js
-var ImageGallery = require('react-image-gallery');
-
-var images = [
-  {
-    original: 'http://lorempixel.com/1000/600/nature/1/',
-    thumbnail: 'http://lorempixel.com/250/150/nature/1/',
-    originalClass: 'featured-slide',
-    thumbnailClass: 'featured-thumb',
-    originalAlt: 'original-alt',
-    thumbnailAlt: 'thumbnail-alt',
-    description: 'Optional description...'
-  },
-  {
-    original: 'http://lorempixel.com/1000/600/nature/2/',
-    thumbnail: 'http://lorempixel.com/250/150/nature/2/'
-  },
-  {
-    original: 'http://lorempixel.com/1000/600/nature/3/',
-    thumbnail: 'http://lorempixel.com/250/150/nature/3/'
+import ImageGallery from 'react-image-gallery';
+
+class MyComponent extends React.Component {
+
+  handleImageLoad(event) {
+    console.log('Image loaded ', event.target)
   }
-];
-
-handleSlide: function(index) {
-  console.log('Slid to ' + index);
-},
-
-render: function() {
-  return (
-    <ImageGallery
-      items={images}
-      autoPlay={true}
-      slideInterval={4000}
-      onSlide={this.handleSlide}/>
-  );
-}
 
+  handlePlay() {
+    this._imageGallery.play()
+  }
+
+  handlePause() {
+    this._imageGallery.pause()
+  }
+
+  render() {
+
+    const images = [
+      {
+        original: 'http://lorempixel.com/1000/600/nature/1/',
+        thumbnail: 'http://lorempixel.com/250/150/nature/1/',
+        originalClass: 'featured-slide',
+        thumbnailClass: 'featured-thumb',
+        originalAlt: 'original-alt',
+        thumbnailAlt: 'thumbnail-alt',
+        description: 'Optional description...'
+      },
+      {
+        original: 'http://lorempixel.com/1000/600/nature/2/',
+        thumbnail: 'http://lorempixel.com/250/150/nature/2/'
+      },
+      {
+        original: 'http://lorempixel.com/1000/600/nature/3/',
+        thumbnail: 'http://lorempixel.com/250/150/nature/3/'
+      }
+    ]
+
+    return (
+      <div>
+        <button onClick={this.handlePlay.bind(this)}>Play</button>
+        <button onClick={this.handlePause.bind(this)}>Pause</button>
+        <ImageGallery
+          ref={i => this._imageGallery = i}
+          items={images}
+          slideInterval={2000}
+          handleImageLoad={this.handleImageLoad}/>
+      </div>
+    );
+  }
+
+}
 ```
 
 # Props
 
 * `items`: (required) Array of objects, see example above,
-* `lazyLoad`: Boolean, default `true`
+* `infinite`: Boolean, default `true`
+  * infinite sliding
+* `lazyLoad`: Boolean, default `false`
 * `showNav`: Boolean, default `true`
 * `showThumbnails`: 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
@@ -94,7 +111,10 @@ render: function() {
 * `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false
 * `slideInterval`: Integer, default `4000`
 * `startIndex`: Integer, default `0`
-* `onSlide`: Function, `callback(index)`
+* `onImageLoad`: Function, `callback(event)`
+* `onSlide`: Function, `callback(currentIndex)`
+* `onPause`: Function, `callback(currentIndex)`
+* `onPlay`: Function, `callback(currentIndex)`
 * `onClick`: Function, `callback(event)`
 
 

diff --git a/example/app.css b/example/app.css
@@ -10,17 +10,22 @@ ul, li {
 }
 
 li {
+  padding: 3px 0;
   display: inline-block;
 }
 
-li + li {
-  margin-left: 10px;
+label {
+  margin-left: 5px;
 }
 
 .app {
   font-family: "Arial Narrow", Arial, sans-serif;
 }
 
+.app-header {
+  letter-spacing: 3px;
+}
+
 .app .image-gallery {
   margin: 0 auto;
   width: 100%;
@@ -34,18 +39,32 @@ li + li {
 
 .app-sandbox {
   margin-top: 20px;
-  border-top: 4px solid #eee;
   padding: 20px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.app-buttons li {
+  display: table-cell;
+}
+
+.app-buttons li + li {
+  padding-left: 10px;
 }
 
 .app-button {
+  font-size: 14px;
   color: #222;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 4px;
   cursor: pointer;
   padding: 10px 20px;
   background: #fff;
+  line-height: 1;
 }
 
 .app-button.active {
@@ -54,9 +73,46 @@ li + li {
   color: #fff;
 }
 
-.app-button:hover {
-  border: 1px solid #222;
-  transition: border .4s ease-in;
+.app-interval-input-group {
+  display: table;
+}
+
+.app-interval-label {
+  display: table-cell;
+  vertical-align: middle;
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1;
+  color: #555;
+  text-align: center;
+  background-color: #eee;
+  border: 1px solid #ccc;
+  border-right: none;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.app-interval-input {
+  -webkit-appearance: none;
+  display: table-cell;
+  margin: 0;
+  padding: 9px;
+  border-radius: 5px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  width: 65px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.app-checkboxes {
+  margin-top: 10px;
+}
+
+.app-checkboxes li {
+  display: block;
 }
 
 .featured-thumb.active img {