在WordPress环境中通过FancyBox和惰性加载调整图像大小的故障

问题描述

我正在使用Fancybox和Lazy Load遇到烦人的故障，在其中单击图库中的图像时，它将加载全屏，然后调整大小。 Here's an example of a page where it's happening（向下滚动到图库）。

jQuery(document).ready(function($){    
var $container = $('#masonry');
$container.imagesLoaded(function(){
$container.masonry({        
    columnWidth: '.col',gutter: '.col-gutter',itemSelector: '.grid-item',percentPosition: true
   
});
$('.grid-item img').addClass('not-loaded');
$('.grid-item img.not-loaded').lazyload({
    //effect: 'fadeIn',load: function() {
        // Disable trigger on this image
        $(this).removeClass("not-loaded");
        $container.masonry('reload');
    }
});
$('.grid-item img.not-loaded').trigger('scroll');
});
});

和我的CSS代码：

.grid-item{position:relative; display:block; }
.mask{position:absolute; opacity:0; background-color:rgba(44,200,248,.7); width:100%; 
height:100%; left:0; right:0; text-transform: uppercase; }
.grid-item:hover .mask{opacity:1;}
.mask span{text-align: center; position:absolute; top:50%; transform: translateY(-50%); 
color:white; font-weight:700; font-size:24px; letter-spacing: 1px; margin-left:auto; margin- 
right:auto; left:0; right:0;}


#masonry::before { content: ""; display: table; clear: both;}
#masonry::after { content: ""; display: table; clear: both;}
.col,#masonry a {  width:31%; margin:1% 0 0; }
.col-gutter{width:1%;}
#masonry a img {  width: 100%;  display: block;  height: auto; opacity:0; }
#masonry a img.not-loaded { opacity:1; transition:opacity 1s ease-in; -moz-transition:opacity 1s ease-in; -webkit-transition:opacity 1s ease-in;}

知道为什么会这样吗？预先感谢您的输入！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）