多个按钮打开Photoswipe的关联图像

Question

假设我们有2张图片。使用下面的Photoswipe js，我将在'btn'旁边有第二个按钮，以便单击另一个按钮时，它将首先直接打开第二个图像，而不是第一个图像。 因此，我们将这样做：

document.getElementById（'btn'）。onclick = openPhotoSwipe（do..something ..）; document.getElementById（'btn2'）。onclick = openPhotoSwipe（do..something ..）;

请帮助！

var openPhotoSwipe = function（）{     var pswpElement = document.querySelectorAll（'。pswp'）[0];

{-# LANGUAGE Safe #-}

};

openPhotoSwipe（）;

document.getElementById（'btn'）。onclick = openPhotoSwipe;

Answer 1

您需要使用PhotoSwipe API

Here is a working fiddle

var pswpElement = document.querySelectorAll('.pswp')[0];

var items = [{
    src: 'https://placekitten.com/600/400',
    w: 600,
    h: 400
  },
  {
    src: 'https://placekitten.com/1200/900',
    w: 1200,
    h: 900
  }
];

var options = {
  index: 0
};
//var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
//gallery.init();

var x = document.querySelectorAll(".opengallery");
for (let i = 0; i < x.length; i++) {
  x[i].addEventListener("click", function() {
    opengallery(x[i].dataset.image);
  });
}

function opengallery(j) {
  options.index = parseInt(j);
  gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  gallery.init();
}