0

我也在寻找解决方案，打开带有 img 链接的 PhotoSwipe 画廊。所以有一个带有画廊图标的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>

最好的问候

4

2 回答 2

1

我刚开始使用 photoSwipe，所以我不肯定这会起作用，但在我看来，您只需要调用instance.show(0)点击事件即可。

假设我在页面上有这个元素：<a id="launch-gallery" href="#">Click to launch gallery</a>我可以添加这个 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 中做同样的事情（但更冗长一些）。

我希望这有帮助。

于 2013-03-20T23:25:52.453 回答
1

请注意，我使用 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);
    });
  });

这是照片滑动打开功能：

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
    }
];

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

于 2016-04-08T03:28:03.747 回答