jQuery trigger PhotoSwipe Exclusive mode from standard href link CSS/HTML

Question

I am using PhotoSwipe for my gallery. I want to load the gallery when clicking on a simple href link.

I am using the exclusive mode with no thumbnails, the code is below. The code below triggers the gallery on page load automatically.

I want to be able to manipulate this so it only fires up when the user clicks on the link. The demos are on 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));

Is this possible for the following to be activated when clicking on the following:

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

... And then finally stop it loading up on page up automatically!

Thanks

Answer 1

Yes, see the jQuery demo (and other demos in general ):

You can register a listener to setup photoswipe on an arbitrary event (the demo does this on 'pageshow'). Something like:

$('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;
});

The demo also shows you how to tear down photoswipe, if you'd like to do that.