javascript - 如何用Ajax加载Photoswipe来获取服务器端图片？

Question

我正在搜索画廊库，我看到 PhotoSwipe 。其实我刚刚在 documentation 里做了教程。

我没有看到任何动态加载服务器端图片的教程。

我需要使用 Ajax 加载它们，因为我有一个 datatables ，并在每一行内设置一个图标。用户可以单击该图标，它将出现一个引导模式。在此模式中，我必须显示与单击的行相关的缩略图。当用户单击缩略图时，我需要显示图库。

可以动态加载服务器端图片吗？

Answer 1

我认为您可以通过从点击事件启动图库来实现此目的。如果您将此作为委托(delegate)事件，它也会在新创建的图像上触发。然后您只需要在触发点击事件时创建图像数组并启动图库。

您的图像应按如下方式添加:

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

那么 JS 将是:

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