Multiple Button to Open Associated Image of Photoswipe

Question

Supposed we have 2 images. Using Photoswipe js below, i will have second button beside 'btn', so that when clicking the other button, it will directly open second image at first, instead of the first image. So we will do this :

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

Please help!

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

You need to use 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();
}