Несколько кнопок, чтобы открыть ассоциированное изображение Photoswipe - PullRequest
Новая
       12

Несколько кнопок, чтобы открыть ассоциированное изображение Photoswipe

0 голосов
/ 27 октября 2018

Предположим, у нас есть 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]; 

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

1 Ответ

0 голосов
/ 21 декабря 2018

Вам необходимо использовать PhotoSwipe API

Вот рабочая скрипка 

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