@fisch0920/medium-zoom

中区

用于缩放像中图像的 JavaScript 库

游戏场 ・ 德莫语 ・ · 故事本

特征

• 📱 响应 —— 说 移动和桌面上的缩放
• 🚀 表演和轻量级 —— 说 应该能达到60岁 fps 数据
• ⚡️ 高定义支持 —— 说 将您的图像 HD 版本装入缩放
• 🔎 灵活性 —— 说 将缩放应用到选定的图像
• 🖱 鼠标、键盘和手势友好 —— 说 单击任何地方,按键或滚动向外键关闭缩放
• 🎂 事件处理 —— 说 当缩放进入新状态时触发事件
• 📦 自定义 —— 说 设置您自己的边距、 背景和滚动相左
• 🔧 可插件 —— 说 将自己的特性添加到缩放中
• 💎 自定义模板 —— 说 扩展默认视图以匹配您的应用程序的 UI

安装

该模块可在 无 登记.

npm install medium-zoom
# or
yarn add medium-zoom

下载

• 常规
• 已缩小

光盘N

• 日记
• (单位:公斤)

使用量

在浏览器里试试

导入库为模块 :

import mediumZoom from 'medium-zoom'

或用脚本标记导入库 :

<script src="node_modules/medium-zoom/dist/medium-zoom.min.js"></script>

就这样! 您不需要导入任何 CSS 样式 .

假设您添加 data-zoomable 图像属性 :

mediumZoom('[data-zoomable]')

API 密码

mediumZoom(selector?: string | HTMLElement | HTMLElement[] | NodeList, options?: object): Zoom

选择器

选择器允许将图像附加到缩放上 。 它可以分为以下几种类型:

• CSS 选择器
• HTMLElement
• NodeList
• Array

// CSS selector
mediumZoom('[data-zoomable]')

// HTMLElement
mediumZoom(document.querySelector('#cover'))

// NodeList
mediumZoom(document.querySelectorAll('[data-zoomable]'))

// Array
const images = [
  document.querySelector('#cover'),
  ...document.querySelectorAll('[data-zoomable]'),
]

mediumZoom(images)

选项

选项可以实现缩放的定制。 它们被定义为具有下列属性的对象:

mediumZoom('[data-zoomable]', {
  margin: 24,
  background: '#BADA55',
  scrollOffset: 0,
  container: '#zoom-container',
  template: '#zoom-template',
})

方法

open({ target?: HTMLElement }): Promise<Zoom>

打开缩放并返回用缩放解析的保证.

const zoom = mediumZoom('[data-zoomable]')

zoom.open()

显示事件 open 动画开始和 opened 完成时.

close(): Promise<Zoom>

关闭缩放并返回用缩放解析的保证 .

const zoom = mediumZoom('[data-zoomable]')

zoom.close()

显示事件 close 动画开始和 closed 完成时.

toggle({ target?: HTMLElement }): Promise<Zoom>

当关闭时打开缩放 / 当打开时删除缩放 , 并返回与缩放解析的保证 .

const zoom = mediumZoom('[data-zoomable]')

zoom.toggle()

attach(...selectors: string[] | HTMLElement[] | NodeList[] | Array[]): Zoom

将图像附于缩放并返回缩放.

const zoom = mediumZoom()

zoom.attach('#image-1', '#image-2')
zoom.attach(
  document.querySelector('#image-3'),
  document.querySelectorAll('[data-zoomable]')
)

detach(...selectors: string[] | HTMLElement[] | NodeList[] | Array[]): Zoom

从缩放中释放图像并返回缩放.

const zoom = mediumZoom('[data-zoomable]')

zoom.detach('#image-1', document.querySelector('#image-2')) // detach two images
zoom.detach() // detach all images

显示事件 detach 在图像.

update(options: object): Zoom

更新选项并返回缩放.

const zoom = mediumZoom('[data-zoomable]')

zoom.update({ background: '#BADA55' })

显示事件 update 在缩放的每个图像上.

clone(options?: object): Zoom

以所提供的选项将 Clones 缩放与当前选项合并并返回缩放 .

const zoom = mediumZoom('[data-zoomable]', { background: '#BADA55' })

const clonedZoom = zoom.clone({ margin: 48 })

clonedZoom.getOptions() // => { background: '#BADA55', margin: 48, ... }

on(type: string, listener: () => void, options?: boolean | AddEventListenerOptions): Zoom

在缩放的每个目标上注册听众.

一样 options 作为 addEventListener 被使用.

const zoom = mediumZoom('[data-zoomable]')

zoom.on('closed', event => {
  // the image has been closed
})

zoom.on(
  'open',
  event => {
    // the image has been opened (tracked only once)
  },
  { once: true }
)

缩放对象可以在 event.detail.zoom。 。 。 .

off(type: string, listener: () => void, options?: boolean | AddEventListenerOptions): Zoom

删除缩放每个目标上先前已注册的收听器.

一样 options 作为 removeEventListener 被使用.

const zoom = mediumZoom('[data-zoomable]')

function listener(event) {
  // ...
}

zoom.on('open', listener)
// ...
zoom.off('open', listener)

缩放对象可以在 event.detail.zoom。 。 。 .

getOptions(): object

返回缩放选项为对象.

const zoom = mediumZoom({ background: '#BADA55' })

zoom.getOptions() // => { background: '#BADA55', ... }

getImages(): HTMLElement[]

返回附在缩放上的图像,作为 HTMLElement编号。 。 。 .

const zoom = mediumZoom('[data-zoomable]')

zoom.getImages() // => [HTMLElement, HTMLElement]

getZoomedImage(): HTMLElement

返回当前缩放的图像 HTMLElement 或者说 null 如果没有.

const zoom = mediumZoom('[data-zoomable]')

zoom.getZoomedImage() // => null
zoom.open().then(() => {
  zoom.getZoomedImage() // => HTMLElement
})

属性

data-zoom-src

指定在缩放时打开的高定义图像。 此图像在用户点击源图像时会加载.

<img src="image-thumbnail.jpg" data-zoom-src="image-hd.jpg" alt="My image" />

活动

const zoom = mediumZoom('[data-zoomable]')

zoom.on('open', event => {
  // track when the image is zoomed
})

缩放对象可以在 event.detail.zoom。 。 。 .

实例

const button = document.querySelector('[data-action="zoom"]')
const zoom = mediumZoom('#image')

button.addEventListener('click', () => zoom.open())

let counter = 0
const zoom = mediumZoom('#image-tracked')

zoom.on('open', event => {
  console.log(`"${event.target.alt}" has been zoomed ${++counter} times`)
})

const zoom = mediumZoom('[data-zoomable]')

zoom.on('closed', () => zoom.detach(), { once: true })

mediumZoom($('[data-zoomable]').toArray())

import React from 'react'
import mediumZoom from 'medium-zoom'

function ImageZoom({ zoom, src, alt, background }) {
  const zoomRef = React.useRef(zoom.clone({ background }))

  function attachZoom(image) {
    zoomRef.current.attach(image)
  }

  return <img src={src} alt={alt} ref={attachZoom} />
}

function App() {
  const zoom = React.useRef(mediumZoom({ background: '#000', margin: 48 }))

  render() {
    return (
      <ImageZoom src="image.jpg" alt="Image" zoom={zoom.current} color="#BADA55" />
    )
  }
}

import React, { Component } from 'react'
import mediumZoom from 'medium-zoom'

class ImageZoom extends Component {
  zoom = this.props.zoom.clone({
    background: this.props.color,
  })

  attachZoom = image => {
    this.zoom.attach(image)
  }

  render() {
    return (
      <img src={this.props.src} alt={this.props.alt} ref={this.attachZoom} />
    )
  }
}

class App extends Component {
  zoom = mediumZoom({ background: '#000', margin: 48 })

  render() {
    return (
      <ImageZoom src="image.jpg" alt="Image" zoom={this.zoom} color="#BADA55" />
    )
  }
}

你看见了 更多实例 包括 反应 财务报告和审定财务报表 阴道,或检查 故事书。 。 。 .

调试

.medium-zoom-overlay,
.medium-zoom-image--opened {
  z-index: 999;
}

浏览器支持

^{* 联合国} 这些浏览器需要 template 多边填充 使用时 自定义模板。 。 。 .

交叉浏览器测试由

捐款

• 运行 yarn 以安装节点依赖
• 运行 yarn start 以监视模式构建库
• 运行 yarn run storybook 在http://localhost:9001上查看您的更改

请读一下 提供指南 更详细的解释.

您还可以使用 无。 。 。 .

许可证

麻省理工学院 弗朗索瓦·查利福尔