Skip to content
This repository has been archived by the owner on Jan 5, 2019. It is now read-only.

一个基于 React 的全屏图片浏览插件 | A simple image slideshow with react

License

Notifications You must be signed in to change notification settings

Caldis/react-image-slideshow

Repository files navigation

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

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

react-image-slideshow

npm version

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

https://dn-hfdhq52q.qbox.me/9e55ac299dfff38fc0c6.html

Local demo

git clone https://github.com/Caldis/react-image-slideshow
cd react-image-slideshow
npm install
npm run dev
opettp://127.0.0.1:8080/

Installation

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

Usage

1. Import the component (Make sure you already install the react-portal and tween.js)

import SlideShow from 'react-image-slideshow';

Setup the image data

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'
        }
      ]
    }
}

2. Place the component, pass in the image data and ref name

render() {
  return (
      <div className={styles.main}>
          <SlideShow imgs={this.state.imgsData} ref="SlideShow"/>
      </div>
  );
}

3. Call the open method to open the slideshow overlay, yay!

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

Documentation - props

Always required

props : imgs

A Array contain several object of images detail

[
  {
    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.

<SlideShow imgs={this.state.imgsData} ref="SlideShow"/>

func : handleModalOpen(index)

Pass in the index num to control the initial image in the slideshow
handleSlideshowOpen(index) {
  this.refs.SlideShow.handleModalOpen(index);
}
render() {
  return (
    <div className="main">
        <SlideShow imgs={imgUrlList} ref="SlideShow"/>
    </div>
  );
}

Optional

lazyLoad: bool

default: true

Save the network

infinitySwitch: bool

default: true

If false, the image will back to head after you view to end.

switchButton: bool

default: true

If false, the switchButton on screen side will not show.

switchKey: bool

default: true

If false, the key switch will not be able.

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

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
  • 1.4.0 Fix the position dislocation when zoom on Firefox low version Add props for disable key switch
  • 1.4.1 Fix the bug when using ESC to quit the sildeshow Add the hover/active effect on switch button
  • 1.5.0 Fix the action icon display when image not loading Add image reload button when image loading time out
  • 1.5.1 Change the demo page link

Credit

About

一个基于 React 的全屏图片浏览插件 | A simple image slideshow with react

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages