lightgallery 更新索引

Question

有了滤镜选项(uikit)，我们可以在display:none中放置img马赛克，但是我们如何update lightbox index 来自lightgallery.js 插件呢？

JS :

var $lg = $('.js-filter');
$lg.lightGallery({thumbnail: false});

// $lg.data('lightGallery').destroy(true);  ???

JSFIDDLE

谢谢！

Answer 1

我想你可以挂钩到 uikit 过滤器事件，以销毁并触发一个新的画廊：

// Gallery container
var $lg = $('.js-filter');

// Initialize the gallery for all the elements
$lg.lightGallery({
  selector: 'li',
  thumbnail: false
});

// After uikit filter is applied
$('[uk-filter]').on('afterFilter', function() {

  // Destoy the previously created gallery
  $lg.data('lightGallery').destroy(true);

  // Initialize new gallery with just the visible items
  $lg.lightGallery({
    selector: 'li:visible',
    thumbnail: false
  });

});

lightgallery 更新索引

lightgallery UPDATE INDEX

javascript

jquery

lightbox

slideshow