使用javascript中的“下一个”和“上一个”按钮缩放图像

现在我正在使用materialize设计，我想实现点击缩放功能。我看到了一个链接，我想实现如下

我的代码：

<a href="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="zoom"/>">
  <img data-bigimgurl="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="descriptionPageBig"/>" 
                                         width="60" class="prod-zoom-img" src="<catalog:ProductImageUrl pictureId="${pic.pictureId}" productName="${product.name}" useCase="modal-giftbox"/>" alt="view ${product.name}" title="${product.name}">
</a>

我在这一页工作

屏幕截图：

物化设计提供缩放功能，但其没有用于更改图像的“上一步”和“下一步”按钮。 我正在寻找一些简单的方法。给我一些关于这个问题的想法

使用灯箱-

你基本上需要

在页面中包含lightbox js和css文件

向要打开的链接添加

数据灯箱

属性

例如，属性将是

data lightbox=“image\u collection\u name”

其中，

image\u collection\u name

是一个任意名称，显示图片是同一集合的一部分（您可以使用箭头浏览图片）