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.

Answer 2

Note that I use php (ajax) to deliver the image locations and sizes, so you'll still have to define the json data yourself. This is how I did it with 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);
    });
  });

And here is the photoswipe opening function:

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

note that jsonData is supposed to look somewhat like this:

 [
{
    src: 'https://placekitten.com/600/400',
    w: 600,
    h: 400
},
{
    src: 'https://placekitten.com/1200/900',


       w: 1200,
        h: 900
    }
];

I realise this answer is late, but since this came on top while just googling something entirely different (but photoswipe related), I thought maybe this would be useful!