jQuery從標准href鏈接CSS / HTML觸發PhotoSwipe Exclusive模式

Question

我正在為我的畫廊使用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>

...然后停止自動加載頁面！

謝謝

Answer 1

是的，請參閱jQuery演示 （以及其他一般演示 ）：

您可以注冊一個偵聽器以在任意事件上設置照片擦除（演示在“ 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;
});

該演示還向您展示了如何拆卸照相擦拭（如果需要）。