如何使用Ajax加載Photoswipe以獲取服務器端圖片？

Question

我在找圖庫庫，我看到PhotoSwipe。其實我只是在documentation的教程。

我沒有看到任何教程動態加載我的服務器端圖片。

我需要使用Ajax加載它們，因爲我有datatables，並且在每行內部設置了一個圖標。用戶可以點擊這個圖標，它會出現一個引導模式。在這種模式下，我必須顯示與點擊行相關的縮略圖。當用戶點擊縮略圖時，我需要顯示畫廊。

它可以動態加載服務器端圖片？

Answer 1

我認爲你可以通過點擊事件啓動畫廊來實現這一點。如果您將此設爲委託事件，則它也會在新創建的圖像上觸發。然後，只需在觸發點擊事件並啓動畫廊時創建圖像數組。

你的圖像應該加入這樣的：

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