在javascript中使用next和previouse按钮缩放图像

Question

现在我正在使用物化设计，我想实现点击缩放功能。我看过一个链接，我想实现像this.http://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/

我的代码：

<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>

我正在此页https://www.winni.in/bangalore/black-forest-cake/p/157?rfcid=4

中工作

屏幕拍摄：

Materialise设计提供缩放功能，但它没有用于更改图像的上一个和下一个按钮。 我正在寻找一些容易的事情。给我一些关于这个问题的想法。

Answer 1

使用灯箱 - http://lokeshdhakar.com/projects/lightbox2/。

你基本上需要

1. 在您的页面中包含灯箱js和css文件。
2. 在您要打开的链接中添加data-lightbox属性。

例如，属性为data-lightbox="image_collection_name" 其中image_collection_name是一个任意名称，显示图片是同一个集合的一部分（你可以用箭头浏览它们）