[英]Using JQuery to resize and realign images doesn't work on first load
因此,我对Jquery相对缺乏经验。 我所做的是从主题林购买了一个wordpress主题,它有一个投资组合部分,应该用作砖石结构或网格布局。 第一次加载都不能正确加载。 该主题使用同位素,我认为此链接说明了需要完成的工作: http : //isotope.metafizzy.co/appendix.html#imagesloaded
下面是我认为调用此功能的代码,可以在这里查看该网站https://www.roseryflowers.com/bridal-gallery/
jQuery(document).ready(function($) {
/*-- Portfolio --*/
if ($('.portfolio-items').length > 0) {
$container = $('.portfolio-items');
$container.isotope({filter: '.element'});
$(window).trigger('resize');
$('.portfolio-links a').click(function(e){
e.preventDefault();
var $this = $(this);
if ($this.hasClass('active')) {
return false;
}
$this.parents('.portfolio-links').find('.active').removeClass('active');
$this.parent().addClass('active');
$this.addClass('active');
var selector = $this.attr('data-filter');
$container.isotope( {filter: selector} );
});
}
我不知所措。 任何帮助,将不胜感激。 我什至实现了预加载器。
从同位素的文档
卸载的图像会脱离同位素布局,并导致项目元素重叠。 imagesLoaded解决了此问题。 imagesLoaded通过加载所有子图像后触发回调来工作。
加载所有图像后初始化同位素
var $container = $('#container').imagesLoaded( function() {
$container.isotope({
//options
});
});
这可能是问题
还有更多关于...
编辑
您的包装标签是“ .portfolio-items”,然后尝试
var $container = $('.portfolio-items').imagesLoaded(function () {
if ($('.portfolio-items').length > 0) {
$container = $('.portfolio-items');
$container.isotope({ filter: '.element' });
$(window).trigger('resize');
$('.portfolio-links a').click(function (e) {
e.preventDefault();
var $this = $(this);
if ($this.hasClass('active')) {
return false;
}
$this.parents('.portfolio-links').find('.active').removeClass('active');
$this.parent().addClass('active');
$this.addClass('active');
var selector = $this.attr('data-filter');
$container.isotope({ filter: selector });
});
}
});
您需要确保将ImagesLoaded添加到您的项目中https://github.com/desandro/imagesloaded
从页面中删除imagesloaded.js
文件,并使用
$(window).trigger('resize');
至
$(window).load(function(){ $(window).trigger('resize'); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.