Next/Prev image feature?

[tasinttttttt]

I'm using this. Basically listening for whatever triggers, then opening and closing the viewer with the proper image index.

Not sure it serves everybody's purposes as it's a bit of a rough ride visually (all that opening and closing)... but it worked pretty well in my case :^) .

Here's an example of handling left and arrow key navigation.

const zoom = mediumZoom([images here])

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

const attachKeyEvents = e => {
    document.addEventListener('keyup', handleKey, false)
}
const detachKeyEvents = e => {
    document.removeEventListener('keyup', handleKey, false)
}
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]

Glad you worked your way around with the current API, @tasinttttttt.

I also developed a plugin for previous and next images. However, it needs more testing. I don't have an ETA yet.

[edwardhorsford]

I'd really love some way of doing this without opening and closing the viewer.

[edwardhorsford]

@tasinttttttt I've used your script. Many thanks.

One thing I added was target.scrollIntoView(); after closing the viewer. This way the scrollbar roughly matches up with the image that's been opened and it's more obvious when you're at the top or bottom.

[francoischalifour]

@edwardhorsford What do you mean by "without opening and closing the viewer"?

[edwardhorsford]

@francoischalifour In @tasinttttttt's implementation, when you press an arrow key, they first call zoom.close on the existing item and then zoom.open on the next item. This causes Medium-zoom to close, animate the image away, then animate the new image in to place.

My expectation / hope is this works closer to a lightbox - pressing an arrow key swaps the image in place - no animations.

[marsjaninzmarsa]

My expectation / hope is this works closer to a lightbox - pressing an arrow key swaps the image in place - no animations.

Or even better - with simple slide animation. 🤩

[iammatthias]

Pagination would be great. I wouldn't mind replacing React-Images in the image gallery with medium-zoom if there was a way to easily go between images.

[zmts]

@tasinttttttt tnx for snippet! Works fine!