medium-zoom.md

medium-zoom.js next/prev image feature

[...]
mounted () {
    setTimeout(() => {
      const selectors = document.querySelectorAll('[data-zoom-src]')
      const zoom = mediumZoom(selectors)
      nextPrevImageFeature(zoom)
    }, 500)
  }
[...]

function nextPrevImageFeature (zoom) {
  const attachKeyEvents = e => document.addEventListener('keyup', handleKey, false)
  const detachKeyEvents = e => document.removeEventListener('keyup', handleKey, false)

  zoom.on('open', attachKeyEvents)
  zoom.on('close', detachKeyEvents)

  const handleKey = e => {
    const images = zoom.getImages()
    const currentImageIndex = images.indexOf(zoom.getZoomedImage())
    let target

    if (images.length <= 1) return

    switch (e.code) {
      case 'ArrowLeft':
        target = currentImageIndex - 1 < 0 ? images[images.length - 1] : images[currentImageIndex - 1]
        zoom.close().then(() => zoom.open({ target: target }))
        break
      case 'ArrowRight':
        target = currentImageIndex + 1 >= images.length ? images[0] : images[currentImageIndex + 1]
        zoom.close().then(() => zoom.open({ target: target }))
        break
      default:
        break
    }
  }
}

francoischalifour/medium-zoom#60