0

我正在为我的画廊使用 PhotoSwipe。单击简单的 href 链接时，我想加载图库。

我正在使用没有缩略图的独占模式，代码如下。下面的代码会在页面加载时自动触发图库。

我希望能够对其进行操作，以便仅在用户单击链接时触发。演示在 photoswipe.com 上

    (function(window, PhotoSwipe){

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

            var
                options = {
                    preventHide: true,
                    getImageSource: function(obj){
                        return obj.url;
                    },
                    getImageCaption: function(obj){
                        return obj.caption;
                    }
                },
                instance = PhotoSwipe.attach( 
                    [
                        { url: 'images/full/001.jpg', caption: 'Image 001'},
                        { url: 'images/full/002.jpg', caption: 'Image 002'},
                        { url: 'images/full/003.jpg', caption: 'Image 003'},
                    ], 
                    options 
                );

                instance.show(0);

        }, false);

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

单击以下内容时是否可以激活以下内容：

 <a href="#" class="openGallery">Open gallery</a>

...然后终于停止它自动加载到页面上！

谢谢

4

1 回答 1

0

是的，请参阅jQuery 演示（以及其他一般演示）：

您可以注册一个侦听器以在任意事件上设置 photoswipe（演示在“pageshow”上执行此操作）。就像是：

$('a.openGallery').click(function(e) {
            var instance;
            instance = PhotoSwipe.attach(
                [
                    { url: 'images/full/001.jpg', caption: 'Image 001'},
                    { url: 'images/full/002.jpg', caption: 'Image 002'},
                    { url: 'images/full/003.jpg', caption: 'Image 003'},
                    { url: 'images/full/004.jpg', caption: 'Image 004'},
                    { url: 'images/full/005.jpg', caption: 'Image 005'},
                    { url: 'images/full/006.jpg', caption: 'Image 006'},
                    { url: 'images/full/007.jpg', caption: 'Image 007'},
                    { url: 'images/full/008.jpg', caption: 'Image 008'},
                    { url: 'images/full/009.jpg', caption: 'Image 009'}
                ],
                {
                    target: Util.DOM.find('#PhotoSwipeTarget1')[0],
                    getImageSource: function(obj){
                        return obj.url;
                    },
                    getImageCaption: function(obj){
                        return obj.caption;
                    }
                }
            );
    instance.show(0);
    return true;
});

该演示还向您展示了如何拆除照片滑动，如果您愿意的话。

于 2013-06-10T11:17:08.563 回答