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;

This would be trivial using fancybox - https://codepen.io/fancyapps/pen/VGoRqO?editors=1010 - so, maybe look for alternatives. — Janis, Nov 21 '18 at 08:49
@Janis thanks, i will use this in other project as alternative. — Ray, Dec 23 '18 at 08:29

score 1 · Accepted Answer · answered Dec 21 '18 at 06:19

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

thanks you, it works. Only that it does not work if we open it in webview of android 4.4 device. — Ray, Dec 23 '18 at 11:56

Multiple Button to Open Associated Image of Photoswipe

Please help!

1 Answers1