lightgallery无法查看图片 about hexo-lazyload-image HOT 7 CLOSED

------------------ Original ------------------ From: "杨舟"<[email protected]> Date: Sun, Aug 13, 2017 11:25 PM To: "Troy-Yang/hexo-lazyload-image"<[email protected]>; Cc: "唐门"<[email protected]>;"Mention"<[email protected]>; 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.