react-image-slideshow
=====================

本项目已不再维护, 欢迎使用更强大的 react-zmage

This project has moved. We recommend you to use react-zmage instead.

> A simple image slideshow with react.

Features

- Lazy load
- Smooth Zoom
- Key to control
- Smooth Animation
- Full screen image slideshow
- Directly Download Image
- All function customizable
- Easy to use

Demo

#### Live demo
http://u2sk.com/code/react-image-slideshow/
#### Local demo
``shell
git clone https://github.com/Caldis/react-image-slideshow
cd react-image-slideshow
npm install
npm run dev
open http://127.0.0.1:8080/
`

Installation

`shell
npm install react-image-slideshow react-portal tween.js --save
`

Usage

$3

`jsx
import SlideShow from 'react-image-slideshow';
`

$3

`jsx
constructor(props){
super(props);
this.state = {
imgsData:[
{
url: 'http://ww3.sinaimg.cn/large/d8e32accgw1f6c55xxgp2j20zk0qodry.jpg'
},
{
url: 'http://ww1.sinaimg.cn/large/d8e32accgw1f69b7ifm4gj20qo0qon3e.jpg'
},
{
url: 'http://ww1.sinaimg.cn/large/d8e32accgw1f62keeub2uj21kw2dc4pa.jpg'
}
]
}
}
`

$3

`jsx
render() {
return (

);
}
`

$3

`jsx
handleSlideshowOpen(index) {
this.refs.SlideShow.handleModalOpen(index);
}
`

Documentation - props

$3

#### props : imgs
A Array contain several object of images detail
`jsx
[
{
url: 'http://ww3.sinaimg.cn/large/d8e32accgw1f6c55xxgp2j20zk0qodry.jpg'
},
{
url: 'http://ww1.sinaimg.cn/large/d8e32accgw1f69b7ifm4gj20qo0qon3e.jpg'
},
{
url: 'http://ww1.sinaimg.cn/large/d8e32accgw1f62keeub2uj21kw2dc4pa.jpg'
}
]
`
#### props : ref
Ref the components to call the "handleModalOpen()" method.
`jsx

`
#### func : handleModalOpen(index)
##### Pass in the index num to control the initial image in the slideshow
`jsx
handleSlideshowOpen(index) {
this.refs.SlideShow.handleModalOpen(index);
}
render() {
return (

);
}
`

$3

#### lazyLoad: bool
##### default: true
Save the network
#### infinitySwitch: bool
##### default: true
If false, the image will back to head after you view to end.
#### downloadButton: bool
##### default: true
If false, the download button will not show.
#### zoomButton: bool
##### default: true
If false, the zoom button will not show.
#### indicator: bool
##### default: true
If false, the sequence indicator of image will not show.

Tips & Tricks

- You can use the Up/Down/Left/Right to control the image slide.
- The ESC can quit the slideshow overlay too.
- If the `handleModalOpen([index])` method not receive the index prop, it will show the first image in 'imgs'.

Dependencies

- `react-portal` (https://github.com/tajo/react-portal)
- `tween.js` (https://github.com/CreateJS/TweenJS)

On the road

- Image with Title/text overlay
- More transition animate
- Non dependence
- Thumbnails



##Changelog
- 1.2.2
Fix the import error - Now you can easy to import this components from this lib
Fix the no imgs prop err - Now the component will not crush when it's no receive 'imgs' prop
- 1.2.7
Fix the Action Bar always display problems
Fix the error in IE
Add loading animation

Credit

- Special thank image of example pages from `森画谨制``(http://weibo.com/senhuahua)