lightgallery无法查看图片

[tiexo]

安装插件后，发现不能点击查看大图了，全部显示的loading图片

主题使用的是lightgallery

[tiexo]

我试了fancybox插件依然这样，看来跟点击放大图片冲突了
@Troy-Yang

[Troy-Yang]

Hi @tiexo

我能通过Landscape重现你说的fancybox图片问题，看了一下原因，是因为fancybox会在页面加载完成后在所有img外再次包装一层a元素并把img的src复制给其href，如下：

<a href="https://troyyang.com/images/loading.png" title="image" class="fancybox" rel="article1">
     <img src="https://troyyang.com/images/loading.png" data-original="https://images.troyyang.com/2017-6-25-js-inherence.png" alt="image">
</a>

从上可以看到，页面加载后此时所有图片还是使用的loading图片从而导致fancybox把真实图片找错了。而lazyload只有在图片在可视区域时才把img的src替换为真实图片。

作为fancybox的解决方案，可以把https://github.com/hexojs/hexo-theme-landscape/blob/master/source/js/script.js中的97行

$(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');

改为

      $(this).wrap('<a href="' + ($(this).attr("data-original")?$(this).attr("data-original"):this.src) + '" title="' + alt + '" class="fancybox"></a>');

至于lightgallery，我并没有一个在线的hexo demo，但我看了一下那个类库，也看了他的demo，发现和fancybox的问题差不多，解决方案也差不多就是把新增的a元素中的href值替换为data-original中的值，如果你能提供下你的hexo网站地址，我可以帮你具体看看。

类似于在$("#lightgallery").lightGallery(); 执行后运行下面的代码（未测试）：

$(document).find('img[data-original]').foreach(  
function(){
 $(this).parent().href = this.attributions.data-original
}  )

希望有帮助。

[tiexo]

感谢回复，明天我会试试你的解决方案。 ------------------ 来自 魅族 PRO 6 Plus

…

------------------ Original ------------------ From: "杨舟"<notifications@github.com> Date: Sun, Aug 13, 2017 11:25 PM To: "Troy-Yang/hexo-lazyload-image"<hexo-lazyload-image@noreply.github.com>; Cc: "唐门"<i@tiexo.cn>;"Mention"<mention@noreply.github.com>; Subject: Re: [Troy-Yang/hexo-lazyload-image] lightgallery无法查看图片 (#1) Hi @tiexo 我能通过Landscape重现你说的fancybox图片问题，看了一下原因，是因为fancybox会在页面加载完成后在所有img外再次包装一层a元素并把img的src复制给其href，如下： <a href="https://troyyang.com/images/loading.png" title="image" class="fancybox" rel="article1"> <img src="https://troyyang.com/images/loading.png" data-original="https://images.troyyang.com/2017-6-25-js-inherence.png" alt="image"> </a> 从上可以看到，页面加载后此时所有图片还是使用的loading图片从而导致fancybox把真实图片找错了。而lazyload只有在图片在可视区域时才把img的src替换为真实图片。 作为fancybox的解决方案，可以把https://github.com/hexojs/hexo-theme-landscape/blob/master/source/js/script.js中的97行 $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>'); 改为 (this).attr("data-original")?$(this).attr("data-original"):this.src) + '" title="' + alt + '" class="fancybox"></a>'); 至于lightgallery，我并没有一个在线的hexo demo，但我看了一下那个类库，也看了他的demo，发现和fancybox的问题差不多，解决方案也差不多就是把新增的a元素中的href值替换为data-original中的值，如果你能提供下你的hexo网站地址，我可以帮你具体看看。 类似于在$("#lightgallery").lightGallery(); 执行后运行下面的代码（未测试）： $(document).find('img[data-original]').foreach( function(){ $(this).parent().href = this.attributions.data-original } ) 希望有帮助。 &mdash; You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[ShawyerPeng]

我用的也是lightgallery，按照您的代码在我这儿有语法错误，于是我改成了

$(document).find('img[data-original]').each(function(){
     $(this).parent().href = $(this).attr("data-original");
});

还是不行，所以还是想请教一下您该怎么改才行，谢谢~ @Troy-Yang

[ShawyerPeng]

不好意思，怪我jQuery不怎么熟悉，代码这样改就OK啦

<script>
    $(document).find('img[data-original]').each(function(){
        $(this).parent().attr("href", $(this).attr("data-original"));
    });
</script>

[Troy-Yang]

已经在最新的1.0.6版本里专门对这种问题进行了修复，上面的代码不出意外应该可以删除了

[tiexo]

好的，辛苦！我会试试新版本。

…

On Saturday, January 18, 2020, 杨舟 ***@***.***> wrote: 已经在最新的1.0.6版本里专门对这种问题进行了修复，上面的代码不出意外应该可以删除了 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1?email_source=notifications&email_token=AB6JJGJAGEEERY5NVDUOXSDQ6J6BRA5CNFSM4DWIQ2U2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJJP4MA#issuecomment-575864368>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB6JJGLQN4RZACX3LRR4M7TQ6J6BRANCNFSM4DWIQ2UQ> .