Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gem-mine/rc-gallery
react图片查看器
https://github.com/gem-mine/rc-gallery
Last synced: about 1 month ago
JSON representation
react图片查看器
- Host: GitHub
- URL: https://github.com/gem-mine/rc-gallery
- Owner: gem-mine
- Created: 2019-03-25T06:41:48.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-01-28T08:19:59.000Z (almost 3 years ago)
- Last Synced: 2024-04-13T19:06:05.563Z (9 months ago)
- Language: JavaScript
- Homepage: https://gem-mine.github.io/rc-gallery/site/
- Size: 613 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# react图片查看器组件
---
图片查看器
## 何时使用
- 查看图片的时候
## 浏览器支持
IE 9+
## 安装
```bash
npm install rc-gallery --save
```
## 运行
```bash
# 默认开启服务器，地址为 ：http://localhost:8000/
# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新
npm run start
# 构建生产环境静态文件，用于发布文档
npm run site
```
## 代码演示
在线示例：https://gem-mine.github.io/rc-gallery/site/
### 基本
基本用法。
```jsx
import "rc-gallery/lib/style/";
import Gallery from 'rc-gallery'
const imageOriginal = [
{
original: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg',
thumbnail: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5-thumb.jpg',
description:
图片描述
},
{
original: '//img.zmei.me/gm/26828021367384226.jpg',
thumbnail: '//img.zmei.me/gm/26828021367384226-thumb.jpg',
description: 图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
},
{
original: '//img.zmei.me/gm/priview.jpg',
thumbnail: '//img.zmei.me/gm/priview-thumb.jpg'
},
{
original: '//img.zmei.me/gm/lazyimg1.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg1-thumb.jpg',
},
{
original: '//img.zmei.me/gm/lazyimg2.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg2-thumb.jpg'
}
]
const images = [...imageOriginal, ...imageOriginal, ...imageOriginal, ...imageOriginal]
class App extends React.Component {
state = {
isGallery: false,
}
openGallery = () => {
this.setState({
isGallery: true
})
}
closeGallery = () => {
this.setState({
isGallery: false
})
}
render() {
let gallery = null
if (this.state.isGallery) {
gallery = (
loading...}
onClose={this.closeGallery} />
)
}
return (
{gallery}
查看图片
);
}
}
ReactDOM.render(, mountNode);
```
```css
.fish-gallery-image img {
max-width: none;
}
.demo-custom-spin {
font-size: 20px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
### 控制显隐
使用 `visible` 属性控制 Gallery 是否可见。
```jsx
import "rc-gallery/lib/style/";
import Gallery from 'rc-gallery'
const imageOriginal = [
{
original: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg',
thumbnail: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5-thumb.jpg',
description:
图片描述
},
{
original: '//img.zmei.me/gm/26828021367384226.jpg',
thumbnail: '//img.zmei.me/gm/26828021367384226-thumb.jpg',
description: 图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
},
{
original: '//img.zmei.me/gm/priview.jpg',
thumbnail: '//img.zmei.me/gm/priview-thumb.jpg'
},
{
original: '//img.zmei.me/gm/lazyimg1.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg1-thumb.jpg',
},
{
original: '//img.zmei.me/gm/lazyimg2.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg2-thumb.jpg'
}
]
const images = [...imageOriginal, ...imageOriginal, ...imageOriginal, ...imageOriginal]
class App extends React.Component {
state = {
isGallery: false,
}
openGallery = () => {
this.setState({
isGallery: true
})
}
closeGallery = () => {
this.setState({
isGallery: false
})
}
render() {
return (
loading...}
onClose={this.closeGallery}
visible={this.state.isGallery}
getContainer={false}
/>
查看图片
);
}
}
ReactDOM.render(, mountNode);
```
### 挂载节点
使用 `getContainer` 属性指定 Gallery 挂载的 HTML 节点,，默认挂载在 `body`，值为 `false` 时挂载在当前dom节点。
```jsx
import "rc-gallery/lib/style/";
import Gallery from 'rc-gallery'
const imageOriginal = [
{
original: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg',
thumbnail: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5-thumb.jpg',
description:
图片描述
},
{
original: '//img.zmei.me/gm/26828021367384226.jpg',
thumbnail: '//img.zmei.me/gm/26828021367384226-thumb.jpg',
description: 图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
},
{
original: '//img.zmei.me/gm/priview.jpg',
thumbnail: '//img.zmei.me/gm/priview-thumb.jpg'
},
{
original: '//img.zmei.me/gm/lazyimg1.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg1-thumb.jpg',
},
{
original: '//img.zmei.me/gm/lazyimg2.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg2-thumb.jpg'
}
]
const images = [...imageOriginal, ...imageOriginal, ...imageOriginal, ...imageOriginal]
class App extends React.Component {
state = {
isGallery: false,
}
openGallery = () => {
this.setState({
isGallery: true
})
}
closeGallery = () => {
this.setState({
isGallery: false
})
}
saveContainer = container => {
this.container = container;
};
getContainer = () => this.container;
render() {
return (
loading...}
onClose={this.closeGallery}
visible={this.state.isGallery}
getContainer={this.getContainer}
/>
查看图片
);
}
}
ReactDOM.render(, mountNode);
```
### 事件回调
事件发生时触发回调
```jsx
import "rc-gallery/lib/style/";
import Gallery from 'rc-gallery'
const imageOriginal = [
{
original: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg',
thumbnail: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5-thumb.jpg',
description:
图片描述
},
{
original: '//img.zmei.me/gm/26828021367384226.jpg',
thumbnail: '//img.zmei.me/gm/26828021367384226-thumb.jpg',
description: '图片描述的文字描述'
},
{
original: '//img.zmei.me/gm/priview.jpg',
thumbnail: '//img.zmei.me/gm/priview-thumb.jpg'
},
{
original: '//img.zmei.me/gm/lazyimg1.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg1-thumb.jpg',
},
{
original: '//img.zmei.me/gm/lazyimg2.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg2-thumb.jpg'
}
]
const images = [...imageOriginal, ...imageOriginal, ...imageOriginal, ...imageOriginal]
class App extends React.Component {
state = {
isGallery: false,
}
openGallery = () => {
this.setState({
isGallery: true
})
}
closeGallery = () => {
this.setState({
isGallery: false
})
}
hanldeMovePrev = (currentIndex) => {
console.log(`onMovePrev 图片索引：${currentIndex}`)
}
hanldeMoveNext = (currentIndex) => {
console.log(`onMoveNext 图片索引：${currentIndex}`)
}
handleThumbnailClick = (index) => {
console.log(`onMoveNext 图片索引：${index}`)
}
handleImageLoad = () => {
console.log('图片加载成功')
}
handleImageLoadError = () => {
console.log('图片加载失败')
}
render() {
let gallery = null
if (this.state.isGallery) {
gallery = (
)
}
return (
{gallery}
查看图片
);
}
}
ReactDOM.render(, mountNode);
```
### 自动播放
自动播放图片数组中的图片
```jsx
import "rc-gallery/lib/style/";
import Gallery from 'rc-gallery'
const images = [
{
original: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg',
thumbnail: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5-thumb.jpg',
description:
图片描述
},
{
original: '//img.zmei.me/gm/26828021367384226.jpg',
thumbnail: '//img.zmei.me/gm/26828021367384226-thumb.jpg'
},
{
original: '//img.zmei.me/gm/priview.jpg',
thumbnail: '//img.zmei.me/gm/priview-thumb.jpg'
},
{
original: '//img.zmei.me/gm/lazyimg1.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg1-thumb.jpg',
},
{
original: '//img.zmei.me/gm/lazyimg2.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg2-thumb.jpg'
}
]
class App extends React.Component {
state = {
isGallery: false,
}
openGallery = () => {
this.setState({
isGallery: true
})
}
closeGallery = () => {
this.setState({
isGallery: false
})
}
render() {
let gallery = null
if (this.state.isGallery) {
gallery = (
)
}
return (
{gallery}
显示照片
);
}
}
ReactDOM.render(, mountNode);
```
### 配置工具栏
自定义工具栏
```jsx
import "rc-gallery/lib/style/";
import Gallery from 'rc-gallery'
const images = [
{
original: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg',
thumbnail: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5-thumb.jpg',
description:
图片描述
},
{
original: '//img.zmei.me/gm/26828021367384226.jpg',
thumbnail: '//img.zmei.me/gm/26828021367384226-thumb.jpg'
},
{
original: '//img.zmei.me/gm/priview.jpg',
thumbnail: '//img.zmei.me/gm/priview-thumb.jpg'
},
{
original: '//img.zmei.me/gm/lazyimg1.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg1-thumb.jpg',
},
{
original: '//img.zmei.me/gm/lazyimg2.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg2-thumb.jpg'
}
]
class App extends React.Component {
state = {
isGallery: false,
}
openGallery = () => {
this.setState({
isGallery: true
})
}
closeGallery = () => {
this.setState({
isGallery: false
})
}
handleCustomToolbarItemClick = (obj) => {
alert(`当前是第${obj.currentIndex + 1}张图片`)
}
render() {
let gallery = null
if (this.state.isGallery) {
gallery = (
{
return 点击显示当前是第几张
}}
onClose={this.closeGallery} />
)
}
return (
{gallery}
显示照片
);
}
}
ReactDOM.render(, mountNode);
```
### 设置起始图片
设置从起始图片开始显示。
```jsx
import "rc-gallery/lib/style/";
import Gallery from 'rc-gallery'
const images = [
{
original: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg',
thumbnail: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5-thumb.jpg',
description:
图片描述
},
{
original: '//img.zmei.me/gm/26828021367384226.jpg',
thumbnail: '//img.zmei.me/gm/26828021367384226-thumb.jpg'
},
{
original: '//img.zmei.me/gm/priview.jpg',
thumbnail: '//img.zmei.me/gm/priview-thumb.jpg'
},
{
original: '//img.zmei.me/gm/lazyimg1.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg1-thumb.jpg',
},
{
original: '//img.zmei.me/gm/lazyimg2.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg2-thumb.jpg'
}
]
class App extends React.Component {
state = {
isGallery: false,
startIndex: 0
}
openGallery = (index) => {
this.setState({
isGallery: true,
startIndex: index
})
}
closeGallery = () => {
this.setState({
isGallery: false
})
}
render() {
let gallery = null
if (this.state.isGallery) {
gallery = (
)
}
const clickImages = images.map((item, index) => {
return 
{this.openGallery(index)}} />
})
return (
{gallery}
{clickImages}
);
}
}
ReactDOM.render(, mountNode);
```
```css
.start-index-thumbnail-item {
height: 50px;
width: 100px;
padding: 0 10px;
}
```
### 只有图片一张的时候
图片只有一张的时候，不显示左右箭头和图片下标,自动播放以及缩略图。
```jsx
import "rc-gallery/lib/style/";
import Gallery from 'rc-gallery'
const images = [
{
original: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg',
thumbnail: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5-thumb.jpg',
description:
图片描述
}
]
class App extends React.Component {
state = {
isGallery: false,
}
openGallery = () => {
this.setState({
isGallery: true
})
}
closeGallery = () => {
this.setState({
isGallery: false
})
}
render() {
let gallery = null
if (this.state.isGallery) {
gallery = (
)
}
return (
{gallery}
显示照片
);
}
}
ReactDOM.render(, mountNode);
```
### 自定义图标
自定义图标。
```jsx
import "rc-gallery/lib/style/";
import Gallery from 'rc-gallery'
const imageOriginal = [
{
original: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg',
thumbnail: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5-thumb.jpg',
description:
图片描述
},
{
original: '//img.zmei.me/gm/26828021367384226.jpg',
thumbnail: '//img.zmei.me/gm/26828021367384226-thumb.jpg',
description: (图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
图片描述
)
}
]
const images = [...imageOriginal, ...imageOriginal, ...imageOriginal, ...imageOriginal]
class App extends React.Component {
state = {
isGallery: false,
}
openGallery = () => {
this.setState({
isGallery: true
})
}
closeGallery = () => {
this.setState({
isGallery: false
})
}
render() {
let gallery = null
if (this.state.isGallery) {
gallery = (
上一页}
nextIcon={下一页}
zoomInIcon={放大 }
zoomOutIcon={缩小 }
rotateRightIcon={右转 }
rotateLeftIcon={左转 }
playIcon={播放 }
pauseIcon={暂停 }
onClose={this.closeGallery} />
)
}
return (
{gallery}
查看图片
);
}
}
ReactDOM.render(, mountNode);
```
```css
.demo-goto-page {
font-size: 15px;
}
```
### 在文档中显示
在文档中显示。
```jsx
import "rc-gallery/lib/style/";
import Gallery from 'rc-gallery'
const imageOriginal = [
{
original: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg',
thumbnail: '//img.zmei.me/gm/a801236bjw1ez812gy3g8j20rs0rs0z5-thumb.jpg',
description:
图片描述
},
{
original: '//img.zmei.me/gm/26828021367384226.jpg',
thumbnail: '//img.zmei.me/gm/26828021367384226-thumb.jpg'
},
{
original: '//img.zmei.me/gm/priview.jpg',
thumbnail: '//img.zmei.me/gm/priview-thumb.jpg'
},
{
original: '//img.zmei.me/gm/lazyimg1.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg1-thumb.jpg',
},
{
original: '//img.zmei.me/gm/lazyimg2.jpg',
thumbnail: '//img.zmei.me/gm/lazyimg2-thumb.jpg'
}
]
const images = [...imageOriginal, ...imageOriginal, ...imageOriginal, ...imageOriginal]
class App extends React.Component {
state = {
isGallery: true,
}
openGallery = (index) => {
this.setState({
isGallery: true,
})
}
closeGallery = () => {
this.setState({
isGallery: false
})
}
render() {
let gallery = null
if (this.state.isGallery) {
gallery = (
)
}
return (
{gallery}
{this.state.isGallery ? null : 查看图片}
);
}
}
ReactDOM.render(, mountNode);
```
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------------- | ---------- |-------|
| displayMode | 显示模式, 有全屏遮罩模式和插入文档流模式 | Enum{ 'inline', 'modal' } | `modal` |
| images | 数组对象，存放图片信息 | [Gallery.images[]](#images) | 无 |
| showToolbar | 是否显示工具条 | boolean | true |
| showThumbnail | 是否显示缩略图 | boolean | true |
| keymap | 是否开启默认键盘事件（esc关闭，左右选图片） | boolean | true |
| startIndex | 初始进入显示第几张图 | number | 0 |
| toolbarConfig | 配置工具栏 | object | toolbarConfig: { autoPlay: true, rotateLeft: true, rotateRight: true, zoomIn: true, zoomOut: true } |
| playSpeed | 自动播放速度(单位毫秒) | number | 2000 |
| infinite | 是否无限循环 | boolean | false |
| spinClass | 传入spin组件，替代自带的spin图 | react.element | 无 |
| customToolbarItem(images: object[], src: string, currentIndex: number) | 自定义toolbar；参数images是传入的图片数组，参数src是当前图片的原图地址，currentIndex是当前图片的索引 | function | () => {} |
| onClose | 关闭回调 | function | 无 |
| onMovePrev(currentIndex: Number) | 点击上一页回调，参数为当前图片索引 | function | 无 |
| onMoveNext(currentIndex: Number) | 点击下一页回调，参数为当前图片索引 | function | 无 |
| onThumbnailClick(index: Number) | 点击缩略图回调，参数为缩略图表示的图片索引 | function | 无 |
| onImageLoad | 图片加载完成回调 | function | 无 |
| onImageLoadError | 图片加载失败回调 | function | 无 |
| closeIcon | 自定义关闭图标 | ReactNode | 无 |
| thumbnailIcon | 自定义开关缩略图图标 | ReactNode | 无 |
| prevIcon | 自定义上一页图标 | ReactNode | 无 |
| nextIcon | 自定义下一页图标 | ReactNode | 无 |
| maxZoomSize | 最大可缩放比例 | number | 3 |
| minZoomSize | 最小可缩放比例 | number | 0.2 |
| mouseWheelZoom | 开启鼠标滚轮放大缩小 | boolean | true |
| mouseZoomDirection | 自定义鼠标滚轮控制缩放的方向，参数为滚轮事件对象。返回`true`图片缩小，返回`false`图片放大，默认win下滚轮向上放大，向下缩小；mac下相反 | (e) => boolean | `isMac ? e.deltaY < 0 : e.deltaY > 0` |
| zoomInIcon | 自定义放大图标 | ReactNode | 无 |
| zoomOutIcon | 自定义缩小图标 | ReactNode | 无 |
| rotateRightIcon | 自定义右转图标 | ReactNode | 无 |
| rotateLeftIcon | 自定义左转图标 | ReactNode | 无 |
| playIcon | 自定义播放图标 | ReactNode | 无 |
| pauseIcon | 自定义暂停图标 | ReactNode | 无 |
| direction | 设置缩略图移动方向 | `ltr` \| `rtl` | 无 |
| visible | 控制Gallery是否可见 | boolean | 无 |
| getContainer | 在 `modal` 模式下，指定 Gallery 挂载的 HTML 节点，false 为挂载在当前 dom。 注意：只有使用 `visible` 控制显隐时，该属性才生效。[详见](#挂载节点) | HTMLElement \| () => HTMLElement \| false | body |
### images
配置每张图片信息，配置项如下
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------------- | ---------- |-------|
| original | 图片的原图地址 | string | 无 |
| thumbnail | 图片的缩略图地址，若未配置，则使用原图 | string | 无 |
| description | 图片的描述 | react.element \| string | 无 |