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

Question

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

document.getElementById('btn').onclick = openPhotoSwipe(do..something..); document.getElementById('btn2').onclick = openPhotoSwipe(做..某事..);

请帮忙！

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

// build items array
var items = [
    {
        src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
        w: 964,
        h: 1024
    },
    {
        src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
        w: 1024,
        h: 683
    }
];

// define options (if needed)
var options = {
         // history & focus options are disabled on CodePen        
    history: false,
    focus: false,

    showAnimationDuration: 0,
    hideAnimationDuration: 0

};

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

};

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();
}

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

Multiple Button to Open Associated Image of Photoswipe

javascript

photoswipe

请帮忙！