How to load Photoswipe with Ajax to get server side pictures?

Question

I'm searching for a gallery library and I see PhotoSwipe. Actually I just made the tutorial in the documentation.

I don't see any tutorial to load my server side pictures dynamically.

I need to load them with Ajax because I have a datatables, and inside each row I set an icon. The user can click on this icon and it will appears a bootstrap modal. In this modal I have to show the thumbnails related with the clicked row. And when the user click on the thumbnails I need to show the gallery.

It's possible to load dynamically server side pictures ?

score 2 · Answer 1 · answered Jul 03 '17 at 11:15

2

I think you can achieve this by initiating the gallery from the click event. If you make this a delegated event, it will also get triggered on newly created images. Then you only need to create the image array upon triggering the click event and fire up the gallery.

Your images should be added like this:

<img class="myAjaxLoadedImage" src="myAjaxLoadedImage1_thumbnail.jpg" alt="" 
     data-img-title="My title 1" data-img-src="myAjaxLoadedImage1.jpg" 
     data-img-width="800" data-img-height="600">

<img class="myAjaxLoadedImage" src="myAjaxLoadedImage2_thumbnail.jpg" alt="" 
     data-img-title="My title 2" data-img-src="myAjaxLoadedImage2.jpg" 
     data-img-width="400" data-img-height="700">
...

And the JS would then be:

(function($) {
  var pswp;

  $(function() {
    pswp = $('.pswp')[0];
    setGalleryClickEvents();
  });

  function setGalleryClickEvents() {
    $(document).on('click','.myAjaxLoadedImage',function(e) {
      if (pswp) {
        var options = {
          index: $(this).index()
          // + other PhotoSwipe options here...
        }
        var images = [];
        $('.myAjaxLoadedImage').each(function() {
          var $img = $(this);
          images.push({
            src: $img.data('imgSrc'),
            w: $img.data('imgWidth'),
            h: $img.data('imgHeight'),
            title: $img.data('imgTitle')
          });
        });
        var gallery = new PhotoSwipe(pswp, PhotoSwipeUI_Default, images, options);
        gallery.init();
      }
    });
  }
})(jQuery);

answered Jul 03 '17 at 11:15

vi5ion

1,028
7
11

Thanks for your answer. Where is your ajax ? – John Jul 03 '17 at 11:25
Do you have an example to add dynamically thumbnails instead of images ? – John Jul 03 '17 at 12:50
The example HTML that I added actually is for thumbnails. The image that will be visible in the modal is the one in the `src` attribute: `src="myAjaxLoadedImage1_thumbnail.jpg"`. This should be the URL to your thumbnail. The value of `data-img-src` indicates the URL to the full size image, that shows when you click on the thumbnail: `data-img-src="myAjaxLoadedImage1.jpg"`. – vi5ion Jul 03 '17 at 12:57
The actual ajax call is not really relevant to the answer. As long as your images have the required data attributes it doesn't matter how you added them to the html. It can be as simple as `$('#modal').load('url_to_some_ajax.file');`. – vi5ion Jul 03 '17 at 13:01
But in the documentation (in the middle of the page http://photoswipe.com/documentation/getting-started.html) they said to create thumbnails with this `

Image caption

` – John Jul 03 '17 at 13:06
Of course, there are many ways to get the same result. I just gave you the one that I prefer, since it is only one single element per image which contains all the necessary information. – vi5ion Jul 03 '17 at 13:14
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148228/discussion-between-john-and-vi5ion). – John Jul 03 '17 at 13:14

How to load Photoswipe with Ajax to get server side pictures?

1 Answers1