javascript - 多个按钮可打开 Photoswipe 的关联图像
问题描述
假设我们有 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;
解决方案
您需要使用 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();
}
推荐阅读
- spring-data - Spring Data Rest Controller (EndPoint) 的 Spring AOP 切入点
- c# - 替换列表中的字符串时出现问题,这是循环中对象的属性
- flutter - 我无法在灵活小部件中添加列小部件,错误:无法将 Null 类型的值分配给 const 构造函数中 Widget 类型的参数
- python - 将多个 xml 文件转换为 .csv 时出现 NotADirectoryError
- wordpress - 视频与文字不同步
- amazon-web-services - Wix + GoDaddy 域 + 子域的 AWS ELB
- ionic-framework - Snapchat 与离子电容器共享
- node.js - 错误:767:在 '{ 在 macOS 中安装节点时出现意外令牌
- java - Java上的浮点数据类型没有给出正确的值
- ansible - 如何捕获和显示文件名