从 lightGallery 插件获取 data-src答案

【问题标题】：Get data-src from lightGallery plugin从 lightGallery 插件获取 data-src
【发布时间】：2018-09-30 17:01:02
【问题描述】：

我正在使用 lightgallery 插件http://sachinchoolur.github.io/lightGallery/docs/api.html#attributes

我想在单击图像时获取 data-src 值。

基本的HTML如下

<div id="work-grid" class="grid wow fadeIn animated">
   <div class="ecp-thumbnail element-item landing" data-iframe="true"  data- 
    src="image/landingpages/alta_1.jpg">
   <img class="img-responsive img-thumbnail" 
   src="image/landingpages/thumb_alta_1.jpg" />
  </div>
</div>

我的javascript如下

var $workGrid = $("#work-grid");

$workGrid.lightGallery({
    mode: 'lg-fade',
    cssEasing: 'cubic-bezier(0.25, 0, 0.25, 1)',
    download: false,
     share: false,
     selector: 'this'
});

$workGrid.on('onBeforeOpen.lg', function (event, prevIndex, index) {
    alert($workGrid.data('src'));
});

但我似乎无法获得点击图像的 data-src 属性值。

我添加了选择器：'this'，但我无法弄清楚我应该如何使用它？

任何帮助将不胜感激。

【问题讨论】：

标签： javascript lightgallery

【解决方案1】：

对于其他试图解决此问题的人，我可以通过使用

获得此索引

$workGrid.on('onBeforeSlide.lg', function (event, index) {

alert($(".ecp-thumbnail").eq(index).attr('data-src'));

});

【讨论】：

【解决方案2】：

试试下面的代码

      var $lg =  $('#lightgallery').lightGallery({
            animateThumb: false,
            showThumbByDefault: false,
            controls:false
        });

        $lg.lightGallery();
        $lg.on('onBeforeSlide.lg',function(){
        let src =  $lg.data('lightGallery').$items.eq(0).data('src');
            getHighResolutionScreenShots(src);
        });

你也可以替换这个函数 getHighResolutionScreenShots(src);

【讨论】：