PhotoSwipe use image to open gallery

Question

Im looking for a solution too open the PhotoSwipe gallery with a img link. So there is a IMG with a gallery icon. And i want if the user click on it that the gallery open.

Have someone an idea how i can handel that?

I found this out. But this open on load the gallery.

<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>

Best regargs

Answer 1

I just started working with photoSwipe so I am not positive this will work but it seems to me you only have to call instance.show(0) on a click event.

Assuming I have this element on the page: <a id="launch-gallery" href="#">Click to launch gallery</a> I could add this jQuery click event to launch the gallery:

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

If you are not using jQuery, you can do the same thing in native JavaScript (but a little more verbose).

I hope this helps.