Javascript Photosweep使用图像打开库

我也在寻找解决方案打开Photosweep图库 img链接。所以有一个带画廊图标的IMG。我想知道 用户单击它，库将打开

有人知道我该怎么做吗

我发现了这个。但这是在画廊里打开的

<script type="text/javascript">
        (function(window, PhotoSwipe){

            document.addEventListener('DOMContentLoaded', function(){

                var
                    options = {
                        preventHide: true
                    },
                    instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

                    instance.show(0);

            }, false);


        }(window, window.Code.PhotoSwipe));

</script>

（功能（窗口、Photosweep）{
document.addEventListener（'DOMContentLoaded'，function（）{
变量
选项={
真的吗
},
instance=photoswip.attach（window.document.queryselectoral（“#库a”），选项）；
实例show（0）；
}，假）；
}（window，window.Code.photoswip））；

---

Best regargs

我刚开始使用Photosweep，所以我不确定这是否可行，但在我看来，您只需调用

实例。单击事件时显示（0）

假设页面上有此元素：

我可以添加此jQuery单击事件来启动库：

$('#launch-gallery').click(function(evt){
  evt.preventDefault(); // prevent regular click action
  instance.show(0);     // Make sure 'instance' variable is available to this function
});

如果您不使用jQuery，那么可以在本机JavaScript中执行相同的操作（但要更详细一些）

我希望这会有所帮助。

请注意，我使用php（ajax）提供图像位置和大小，因此您仍然需要自己定义json数据。 这就是我使用Jquery的方式：

$('.element').off(); //in case it's a dynamically changing element
$('.element').on("click tap", function () {
var dataForPhpScript = $(this).parents('.gallery').attr("data-attr"); //data for php script

    $.getJSON('urlToPHPFunction?dataID=' + dataForPhpScript, function (json) {
      openPhotoSwipe(json);
    });
  });

这是Photoswip的打开功能：

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

  // 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, jsonData, options);
  gallery.init();
}

注意，jsonData应该看起来有点像这样：

 [
{
    src: 'https://placekitten.com/600/400',
    w: 600,
    h: 400
},
{
    src: 'https://placekitten.com/1200/900',


       w: 1200,
        h: 900
    }
];

---

我意识到这个答案已经晚了，但由于这是在谷歌搜索完全不同的东西（但与Photosweep相关）时出现的，我想这可能会有用

你看到的是一个庞大的系统。不仅仅是javascript。您将需要PHP记录所有图像，并记录类似的细节。只要我明白你的意思。否则，将属性用于图像细节等，并构建onclick事件来显示这些属性等。您自己尝试过了吗？