AJAX 上的 Fancybox 缩略图

Question

我正在使用正在动态加载的 fancybox 画廊。我总是有一张带有 data-fancybox 属性和 ID 的图片。

JS是这样的：

  $('[data-fancybox]').each(function(e){
  var idgal = $(this).data("fancybox");
  $(this).fancybox({
    loop: false,
    onInit: function (instance) {
        $.ajax({
            type: 'POST',
            url: '/loadGallery.php?gallery='+idgal,
            dataType: 'json',
            success: function (data) {
              $.each(data, function (index,src) {
                instance.addContent({
                  'type': 'image',
                  'src': src.src
                });
              });
            }
        });
    },
    thumbs: {
        autoStart: true,
        axis      : 'x'
    }
  })
})

问题是，我没有得到动态加载图像的缩略图。有任何想法吗？谢谢！

Answer 1

如果您要求最后一个 fancyBox (v 3.5.7)，要获取缩略图，您还需要继续缩略图 URL（在 options/opts 键内）。而且，最重要的是，最后需要重新初始化拇指（例如，在 Ajax 成功块内的每个循环之后）。

这里只是你的例子中的一部分，有一些变化：

    // Ajax success
    success: function ( data ) {

      $.each(data, function (index, src) {
        instance.addContent({
          'type': 'image',
          'src': src.src,
          'opts': {         
               'thumb': 'thumb.jpg' // thumbnail url (eg. src.opts.thumb)
          }
        });
      });

      // reinitialize Thumbs
      instance.Thumbs.init(instance);

      // optional: to get thumbs autoStart
      instance.Thumbs.show();          

    } // success

AJAX 上的 Fancybox 缩略图

Fancybox thumbnail on AJAX

ajax

fancybox